मुझे पता है कि यह सवाल अब पुराना है, लेकिन इस समस्या के विभिन्न समाधानों पर एक टन अनुसंधान करने के बाद, मुझे लगता है कि मैं एक बेहतर समाधान के साथ आया हूं।
अद्यतन 1: इस उत्तर को पोस्ट करने के बाद से, मैंने इस कोड को एक साधारण सेवा में जोड़ दिया है जिसे मैंने GitHub में पोस्ट किया है। रेपो यहां स्थित है । अधिक जानकारी के लिए इसे आज़ाद करें।
अद्यतन 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>।
2. निर्दिष्ट करें कि कौन से स्टाइलशीट किन मार्गों से संबंधित हैं $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मार्ग पर एक संपत्ति निर्दिष्ट करना पूरी तरह से वैकल्पिक है, क्योंकि यह '/some/route/2'उदाहरण से छोड़ा गया था । यदि मार्ग में कोई cssगुण नहीं है , तो <head>निर्देश केवल उस मार्ग के लिए कुछ नहीं करेगा। यह भी ध्यान दें कि आपके पास प्रति मार्ग में कई पृष्ठ-विशिष्ट स्टाइलशीट हो सकते हैं, जैसा कि '/some/route/3'ऊपर दिए गए उदाहरण में है, जहां cssसंपत्ति उस मार्ग के लिए आवश्यक शैलियों के सापेक्ष पथ का एक सरणी है।
आप कर रहे हैं
उन दो चीजों की स्थापना की जरूरत है कि सब कुछ और यह मेरी राय में, सबसे साफ कोड के साथ संभव है।
आशा है कि किसी और की मदद करता है जो इस मुद्दे से उतना ही जूझ सकता है जितना मैं था।
<link>में सीएसएस टैग का उपयोग किया , नवीनतम क्रोम के साथ, मेरी स्थानीय मशीन पर सर्वर (और "पहले लोड" स्थितियों का अनुकरण करने के लिए "कैश अक्षम करें")। मुझे लगता है कि सर्वर पर आंशिक रूप से HTML में एक टैग डालने से इस समस्या से बचा जा सकेगा।<style>