আমি জানি এই প্রশ্নটি এখন পুরানো, তবে এই সমস্যার বিভিন্ন সমাধান নিয়ে এক টন গবেষণা করার পরে, আমি মনে করি আমি আরও ভাল সমাধান নিয়ে এসেছি।
আপডেট 1: এই উত্তরটি পোস্ট করার পরে, আমি এই কোডটি সমস্তই আমি একটি সাধারণ পরিষেবাতে যুক্ত করেছি যা আমি গিটহাবে পোস্ট করেছি। রেপো এখানে অবস্থিত । আরও তথ্যের জন্য নির্দ্বিধায় এটি দেখুন।
আপডেট 2: এই উত্তরটি যদি দুর্দান্ত হয় তবে আপনার রুটগুলির জন্য স্টাইলশিটগুলি টানানোর জন্য যদি আপনার হালকা ওজনের কোনও সমাধান হয়। আপনি যদি আপনার অ্যাপ্লিকেশন জুড়ে অন-চাহিদা স্টাইলশিটগুলি পরিচালনা করার জন্য আরও সম্পূর্ণ সমাধান চান তবে আপনি ডোর 3 এর অ্যাঙ্গুলারসিএসএস প্রকল্পটি চেকআউট করতে চাইতে পারেন । এটি আরও অনেক সূক্ষ্ম দানযুক্ত কার্যকারিতা সরবরাহ করে।
ভবিষ্যতে যে কেউ আগ্রহী হলে আমি এখানে যা এলাম তা এখানে:
1. <head>উপাদানটির জন্য একটি কাস্টম নির্দেশিকা তৈরি করুন :
app.directive('head', ['$rootScope','$compile',
function($rootScope, $compile){
return {
restrict: 'E',
link: function(scope, elem){
var html = '<link rel="stylesheet" ng-repeat="(routeCtrl, cssUrl) in routeStyles" ng-href="{{cssUrl}}" />';
elem.append($compile(html)(scope));
scope.routeStyles = {};
$rootScope.$on('$routeChangeStart', function (e, next, current) {
if(current && current.$$route && current.$$route.css){
if(!angular.isArray(current.$$route.css)){
current.$$route.css = [current.$$route.css];
}
angular.forEach(current.$$route.css, function(sheet){
delete scope.routeStyles[sheet];
});
}
if(next && next.$$route && next.$$route.css){
if(!angular.isArray(next.$$route.css)){
next.$$route.css = [next.$$route.css];
}
angular.forEach(next.$$route.css, function(sheet){
scope.routeStyles[sheet] = sheet;
});
}
});
}
};
}
]);
এই নির্দেশনাটি নিম্নলিখিত জিনিসগুলি করে:
- এটা তোলে প্রনয়ন (ব্যবহার
$compile) একটি HTML স্ট্রিংটি একটি সেট তৈরি করে <link />প্রতিটি আইটেমের জন্য ট্যাগ scope.routeStylesব্যবহার বস্তুর ng-repeatএবং ng-href।
- এটি ট্যাগে
<link />উপাদানগুলির সংকলন সংযোজন করে <head>।
- এরপরে এটি ইভেন্টগুলি
$rootScopeশোনার জন্য ব্যবহার করে '$routeChangeStart'। প্রতিটি '$routeChangeStart'ইভেন্টের জন্য, এটি "বর্তমান" $$routeঅবজেক্টটি ধরে রাখে (ব্যবহারকারী যে পথে যেতে চলেছে) এবং তার আংশিক-নির্দিষ্ট সিএসএস ফাইল (গুলি) <head>ট্যাগ থেকে সরিয়ে দেয় । এটি "পরবর্তী" $$routeঅবজেক্টটিকে (ব্যবহারকারী যে পথে যেতে চলেছে) ধরে ফেলে এবং তার কোনও আংশিক-নির্দিষ্ট সিএসএস ফাইল (গুলি) <head>ট্যাগটিতে যুক্ত করে।
- এবং
ng-repeatসংকলিত <link />ট্যাগের অংশটি পৃষ্ঠা-নির্দিষ্ট স্টাইলশিটগুলিকে যুক্ত করা বা scope.routeStylesঅবজেক্ট থেকে কী সরানো হবে তার উপর ভিত্তি করে সমস্ত সংযোজন এবং অপসারণকে পরিচালনা করে ।
দ্রষ্টব্য: এটির জন্য আপনার ng-appঅ্যাট্রিবিউটটি <html>উপাদানটিতে থাকা দরকার, না <body>কোনও অভ্যন্তরে বা না <html>।
২. কোন স্টাইলশিটগুলি কোন রুটের সাথে সম্পর্কিত তা উল্লেখ করুন $routeProvider:
app.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/some/route/1', {
templateUrl: 'partials/partial1.html',
controller: 'Partial1Ctrl',
css: 'css/partial1.css'
})
.when('/some/route/2', {
templateUrl: 'partials/partial2.html',
controller: 'Partial2Ctrl'
})
.when('/some/route/3', {
templateUrl: 'partials/partial3.html',
controller: 'Partial3Ctrl',
css: ['css/partial3_1.css','css/partial3_2.css']
})
}]);
এই কনফিগারেশনটি cssপ্রতিটি পৃষ্ঠার রুট সেটআপ করতে ব্যবহৃত অবজেক্টটিতে একটি কাস্টম সম্পত্তি যুক্ত করে। যে বস্তু প্রতিটি '$routeChangeStart'ইভেন্ট হিসাবে পাস করা হয় .$$route। সুতরাং '$routeChangeStart'ইভেন্টটি শোনার সময় , আমরা cssআমাদের নির্দিষ্ট করা সম্পত্তি দখল করতে পারি এবং <link />প্রয়োজনীয়ভাবে সেই ট্যাগগুলিকে সংযোজন / মুছে ফেলতে পারি । নোট করুন যে cssরুটে কোনও সম্পত্তি নির্দিষ্ট করে দেওয়া সম্পূর্ণরূপে alচ্ছিক, কারণ এটি '/some/route/2'উদাহরণ থেকে বাদ দেওয়া হয়েছিল । যদি এই রুটে কোনও cssসম্পত্তি না থাকে তবে <head>নির্দেশিকা সেই রুটের জন্য কেবল কিছুই করবে না। এও নোট করুন যে এমনকি প্রতি রুটে একাধিক পৃষ্ঠা-নির্দিষ্ট স্টাইলশিট থাকতে পারে, যেমন '/some/route/3'উপরের উদাহরণ হিসাবে , যেখানে cssসম্পত্তি সেই রুটের জন্য প্রয়োজনীয় স্টাইলশিটের তুলনায় পাথের একটি সারণি is
৩. আপনি এই
দুটি জিনিস শেষ করে দিয়েছিলেন যা প্রয়োজন যা কিছু সেটআপ করে এবং এটি আমার মতে, সবচেয়ে পরিষ্কার কোড সহ সম্ভব করে তোলে।
আশা করি এটি অন্য কেউ যারা এই সমস্যা নিয়ে আমার সাথে যতটা লড়াই করে চলেছে সম্ভবত তাকে সহায়তা করবে।
<link>ট্যাগ ব্যবহার করেছি , সর্বশেষতম ক্রোম, আমার স্থানীয় মেশিনের সার্ভার (এবং "প্রথম লোড" শর্তাবলী অনুকরণ করার জন্য "ক্যাশে অক্ষম করুন") দিয়ে। আমি কল্পনা করেছিলাম যে সার্ভারে এইচটিএমএল আংশিক কোনও ট্যাগ প্রাক- serোকানো এই সমস্যাটি এড়াতে পারে।<style>