2013-11-05 11 views
7

पृष्ठभूमि: मान लीजिए कि आपके पास 100,000 विचार (आंशिक) हैं। आइए यह भी मान लें कि आपके पास व्यू-स्कोप्ड नियंत्रकों के साथ है, और संभावित रूप से दृश्य-स्कोप्ड सेवाएं और फ़िल्टर भी हैं। 100,000 अलग-अलग छोटे अनुप्रयोगों को होस्ट करने वाले एक समेकित एप्लिकेशन की कल्पना करने का प्रयास करें।टेम्पलेट्स के भीतर से कोणीय जेएस मॉड्यूल को गतिशील रूप से लोड करना (दृश्य)

मुद्दा:

:

$routeProvider.when('/app1', { 
     templateUrl: 'partials/view1.html', 
     controller: 'controller1' 
    }); 

नियंत्रक आम तौर पर के माध्यम से index.html से भरी हुई है: आप "आंशिक" है कि उनके साथ के नियंत्रकों की आवश्यकता है, तो ठेठ समाधान इस तरह कुछ करने के लिए है

<script src="js/directives/Controller1.js"></script> 

इस दृष्टिकोण के साथ समस्या यह है कि यह स्केल नहीं करता है। गतिशील रूप से नियंत्रकों को लोड करने के लिए वहां समाधान हैं, लेकिन उन्हें अभी भी विभिन्न कॉन्फ़िगरेशन में टच पॉइंट जोड़ने की आवश्यकता है।

आदर्श समाधान: आदर्श रूप में - के लिए फिर से बहुत छोटे अनुप्रयोगों जिनकी संख्या 000 के दशक में कर रहे हैं, नियंत्रक गतिशील लोड किया जा सकता है, और आंशिक के भीतर ही से। इससे कई फाइलों और कई कॉन्फ़िगरेशन टच पॉइंट्स (नेटवर्क अनुरोधों का उल्लेख न करने) की आवश्यकता को कम किया जाएगा, और प्रत्येक आंशिक बहुत अच्छी तरह से निहित रखें।

वह कुछ इस तरह दिखेगा:

रूटर में:

<h1>Currently hosting {{appId}}</h1><hr> 
<div class="ng-include: appUrl"></div> 
:

$routeProvider.when('/apps/:appId', { 
     templateUrl: 'partials/app-frame.html', 
     controller: 'AppCtrl' 
    }); 

एचटीएमएल (एप्लिकेशन फ्रेम) युक्त में अपेक्षाकृत भिन्न "मिनी एप्लिकेशन" शामिल

appUrl के साथ आंशिक रूप से हल किए गए, नियंत्रक को परिभाषित करें और मार्कअप एक में:

<script> 
    myApp.controller('controller1', ['$scope', function ($scope) { 
    $scope.foo = "bar"; 
    }]); 
</script> 


<div ng-controller="controller1"> 
    {{foo}} 
</div> 

इस तरह के मामलों में, जहां partials का एक बहुत और नियंत्रक और दृश्य के लिए एक 1-1 मानचित्रण देखते हैं के लिए, यह विकास क्षमता और रखरखाव के लिए इस जोड़े की दो समझ सकते हैं। यह कई फाइलों और अतिरिक्त विन्यास स्पर्श बिंदुओं का उपयोग करने से बहुत साफ है।

समस्या यह है कि यह काम नहीं करता है। यह निर्देश लागू करने से पहले स्क्रिप्ट को लोड करने के लिए मजबूर करना उतना आसान हो सकता है ... लेकिन यह सुनिश्चित नहीं है कि यह कैसे करें?

https://groups.google.com/forum/#!topic/angular/H4haaMePJU0

Loading Partial Page With Angular and Compile The Controller

AngularJS टीम से इगोर कहते हैं::

यहाँ समस्या से कुछ इसी तरह के कारण हो सकते हैं

I see.. we looked into supporting script tags in jqlite, but what needs to be done to get a cross-browser support involves a lot of black magic. For this reason we decided that for now we are just going to recommend that users use jquery along with angular in this particular case. It doesn't make sense for us to rewrite one third of jquery to get this working in jqlite. 

लेकिन मुझे नहीं पता पता है कि उसका क्या मतलब है " jquery का उपयोग करें "... JQuery पहले ही इंडेक्स से में लोड हो चुका है।एचटीएमएल (और कोणीय से पहले), लेकिन ऐसा लगता है कि मुझे विशेष रूप से आंशिक रूप से कुछ करने की ज़रूरत है।

+1

चेक आउट: http://weblogs.asp.net/dwahlin/archive/2013 /05/22/ गतिशील रूप से- लोडिंग- नियंत्रक-and-views-with-angularjs-and-requirejs.aspx – TheSharpieOne

+1

@TheSharpieOne - धन्यवाद, यह एक अच्छा दृष्टिकोण है लेकिन समस्या का समाधान नहीं करता है। निम्न स्तर की समस्या वक्तव्य है: आप आंशिक रूप से ' जोड़ें। यही उनका मतलब है "कोणीय के साथ jquery का उपयोग करें"। कोणीय इसके jqlite का उपयोग करने के बजाय jQuery का उपयोग करेगा। इसे प्रत्येक आंशिक पर होने की आवश्यकता नहीं है, और यहां तक ​​कि उस स्तर पर भी बहुत देर हो चुकी है; कोणीय पहले से ही jqlite का उपयोग करने के लिए निर्धारित किया है। – TheSharpieOne

उत्तर

संबंधित मुद्दे