2013-04-19 12 views
18

this repo एंगुलरजेएस एएमडी के लिए RequJS के साथ प्रत्यारोपित है।क्या AngularJS RequJS की तरह एएमडी का समर्थन करता है?

this repo में कोणीय जेएस टीम एएमडी के साथ एंगुलरजेएस प्रोजेक्ट का बीज करती है जो में आवश्यकताजेएस शामिल नहीं है।

  • क्या मैं इस गलत तरीके से सोच रहा हूं - आईई। क्या वे विभिन्न समस्याओं को हल कर रहे हैं?
  • क्या AngularJS libary समर्थन AMD अब जहां यह पहले नहीं था?
  • क्या अब AngularJS परियोजनाओं के साथ RequJS का उपयोग करना आवश्यक नहीं है?
+0

मुझे लगता है कि इस प्रश्न पर टिप्पणी उपयोगी हो सकता है http://stackoverflow.com/q/12529083/1236044 – jbl

+1

@jbl ऐसा लगता है कि सवाल तिथि कम 'पूछा सितं, 21 '12 है 10: 49' पर। यहां कोणीय टीम द्वारा प्रदान किया गया उदाहरण: https://github.com/angular/angular-seed/blob/master/app/index-async.html मेरे भ्रम से बात करता है। –

+0

यहां एक शानदार वीडियो है जो दिखाता है कि angularJS https://www.youtube.com/watch?v=4yulGISBF8w#t=142 – gskalinskii

उत्तर

20

हां, आप कोणीय के साथ RequJS का उपयोग कर सकते हैं। इसे जोड़ने के लिए आपको थोड़ा अतिरिक्त काम करने की ज़रूरत है, जैसा कि आपने लिंक किया था, लेकिन यह संभव है।

सामान्य रूप से, मुझे एंगुलर के साथ एएमडी की आवश्यकता नहीं मिली है। एएमडी का पूरा विचार यह है कि यह आपको अपनी स्क्रिप्ट के बीच निर्भरता को घोषित करने की अनुमति देता है और उस क्रम के बारे में चिंता न करें जिसमें आप उन्हें पृष्ठ पर शामिल करते हैं। हालांकि, कोणीय आपके निर्भरता इंजेक्शन तंत्र के साथ आपके लिए इसका ख्याल रखता है, इसलिए आपको इसके ऊपर एएमडी का उपयोग करके वास्तव में कोई लाभ नहीं मिल रहा है।

tl; dr मुझे Angular.js के साथ एएमडी का उपयोग करने के लिए एक अनिवार्य कारण नहीं मिला है।

+2

के साथ आवश्यक जेएस का उपयोग कैसे किया जाए, क्या वहां कोई भी "लाभ" है जो आप सोच सकते हैं या परिस्थितियों को चलाने के लिए उसमें आप Angular.js के साथ Requir.js का उपयोग करना चाहते हैं? यहां एक संबंधित लिंक है जो इस चर्चा में योगदान देता है: http://stackoverflow.com/questions/12529083/does-it-make-sense-to-use-require-js-with-angular-js –

+0

क्या आप अधिक/Angularjs निर्भरता इंजेक्शन तंत्र कैसे काम करते हैं इसका एक उदाहरण दें? –

+2

क्या एंजुलरजेड मॉड्यूल को असीमित रूप से लोड करने का कोई तरीका है? –

27

AngularJS साथ RequireJS का उपयोग करते हुए कि उनमें से प्रत्येक, निर्भरता इंजेक्शन के बारे में काम करता है के रूप में हालांकि उन दोनों निर्भरता इंजेक्शन, वे बहुत अलग बातें इंजेक्षन समझ में आता है लेकिन आप समझ ही सकते हैं।

एंगुलरजेएस की अपनी निर्भरता प्रणाली है जो आपको कार्यान्वयन का पुन: उपयोग करने के लिए एक नए बनाए गए मॉड्यूल में कोणीय जेएस मॉड्यूल इंजेक्ट करने देती है। मान लीजिए कि आप एक "पहला" मॉड्यूल है कि एक AngularJS फिल्टर लागू करता बनाई दें "नमस्कार":

angular 
    .module('first', []) 
    .filter('greet', function() { 
    return function(name) { 
     return 'Hello, ' + name + '!'; 
    } 
    }); 

और अब मान लीजिए कि आप नामक एक अन्य मॉड्यूल में "नमस्कार" फिल्टर का उपयोग करना चाहते हैं "दूसरी" है कि एक "अलविदा लागू करता है "फ़िल्टर करें। आपको लगता है कि "दूसरी" मॉड्यूल "पहले" मॉड्यूल इंजेक्शन लगाने के कर सकते हैं:

angular 
    .module('second', ['first']) 
    .filter('goodbye', function() { 
    return function(name) { 
     return 'Good bye, ' + name + '!'; 
    } 
    }); 

बात क्रम RequireJS बिना सही ढंग से इस काम बनाने के लिए, आप यह सुनिश्चित करना है कि यह है कि "पहले" AngularJS मॉड्यूल "दूसरा" AngularJS मॉड्यूल बनाने से पहले पृष्ठ पर लोड किया गया है। उद्धरण दस्तावेज:

मॉड्यूल के आधार पर यह आवश्यक है कि आवश्यक मॉड्यूल लोड होने से पहले आवश्यक मॉड्यूल को लोड करने की आवश्यकता है।

उस अर्थ में, आवश्यकता है जहां आवश्यकताजेएस आपकी मदद कर सकता है क्योंकि RequJS पृष्ठ पर स्क्रिप्ट को इंजेक्ट करने का एक साफ तरीका प्रदान करता है जिससे आप एक-दूसरे के बीच स्क्रिप्ट निर्भरताओं को व्यवस्थित करने में मदद कर सकते हैं।

वापस "पहले" और "दूसरा" AngularJS मॉड्यूल के लिए जा रहे हैं, यहाँ आप यह कैसे स्क्रिप्ट लाभ उठाने के लिए अलग अलग फ़ाइलों पर मॉड्यूल को अलग करने RequireJS का उपयोग कर सकते है निर्भरता लोड हो रहा है:

// firstModule.js file 
define(['angular'], function(angular) { 
    angular 
    .module('first', []) 
    .filter('greet', function() { 
     return function(name) { 
     return 'Hello, ' + name + '!'; 
     } 
    }); 
}); 
// secondModule.js file 
define(['angular', 'firstModule'], function(angular) { 
    angular 
    .module('second', ['first']) 
    .filter('goodbye', function() { 
     return function(name) { 
     return 'Good bye, ' + name + '!'; 
     } 
    }); 
}); 

आप देख सकते हैं कि हम Requजेस कॉलबैक की सामग्री से पहले इंजेक्शन के लिए "फर्स्ट मॉड्यूल" फ़ाइल पर निर्भर करते हैं, जिसे "दूसरा" AngularJS मॉड्यूल "दूसरा" AngularJS मॉड्यूल बनाने के लिए लोड किया जाना चाहिए।

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

मेरे ब्लॉग पोस्ट पर 2.0 संस्करण से AngularJS कोर से RequJS समर्थन रखने के बारे में अधिक जानकारी।

मेरे ब्लॉग पोस्ट "AngularJS साथ RequireJS की भावना बनाना" के आधार पर, यहाँ link है।

2

आप प्रदाताओं का उपयोग कर Angular.js घटकों को आलसी लोड कर सकते हैं। article से:

प्रदाता अनिवार्य रूप से ऐसी वस्तुएं हैं जिनका उपयोग अंगुलरजेएस कलाकृतियों के उदाहरण बनाने और कॉन्फ़िगर करने के लिए किया जाता है। इसलिए, आलसी नियंत्रक को पंजीकृत करने के लिए, आप $controllerProvider का उपयोग करेंगे। ...

संक्षेप में, आप प्रासंगिक प्रदाताओं के उदाहरणों को रखने के लिए पहले अपने ऐप मॉड्यूल को परिभाषित करेंगे। फिर आप मॉड्यूल एपीआई के बजाए प्रदाताओं का उपयोग करके खुद को पंजीकृत करने के लिए अपने आलसी कलाकृतियों को परिभाषित करेंगे। फिर एक 'संकल्प' फ़ंक्शन का उपयोग करके जो आपकी मार्ग परिभाषा में वादा करता है, आप सभी आलसी कलाकृतियों को लोड करेंगे और एक बार लोड होने के बाद वादा को हल करेंगे। यह सुनिश्चित करता है कि प्रासंगिक आलसी प्रदान करने से पहले सभी आलसी कलाकृतियों उपलब्ध होंगे। इसके अलावा, $ rootScope के अंदर वादे को हल करना न भूलें। $ लागू करें, अगर संकल्प AngularJS के बाहर हो रहा है। फिर आप 'बूटस्ट्रैप' स्क्रिप्ट तैयार करेंगे जो पहले ऐप बूटस्ट्रैप करने से पहले ऐप मॉड्यूल लोड करता है। अंत में, आप अपनी 'index.html' फ़ाइल से बूटस्ट्रैप स्क्रिप्ट से लिंक करेंगे।

http://ify.io/lazy-loading-in-angularjs/

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