क्या यह Angular.js के साथ Requ.js का उपयोग करने के लिए समझ में आता है? [बन्द है]


443

मैं Angular.js के लिए नौसिखिया हूँ और यह समझने की कोशिश कर रहा हूँ कि यह Backbone.js से कैसे अलग है ... हम Backbone का उपयोग करते समय आवश्यकता के साथ अपने संकुल निर्भरता का प्रबंधन करते थे। क्या यह Angular.js के साथ भी ऐसा करने के लिए समझ में आता है?


एक और ब्लॉग और बीज परियोजना: startersquad.com/blog/angularjs-requirejs
iwein

19
नहीं - आवश्यकता का उपयोग न करें .js या Angular.JS के साथ ब्राउज़र करें। बस ऐसा करने की कोई आवश्यकता नहीं है - AngularJS में एक मॉड्यूल सिस्टम है और इसके ऊपर एक अन्य मॉड्यूल सिस्टम का उपयोग करना आपके जीवन को अनावश्यक रूप से कठिन बना देगा। मैंने इस धागे में उत्तर का पालन किया है और कुछ घंटों पर बहुत कुछ बर्बाद कर दिया है जो पूरी तरह से अनावश्यक था। कृपया इस लेख को पढ़ें, जिसमें बताया गया है कि क्यों नहीं: medium.com/@dickeyxxx/…
VitalyB

कोणीय के बीच अंतर को समझने के लिए इसे पढ़ें और मॉड्यूल की आवश्यकता है juristr.com/blog/2014/07/lazy-angular-modules
pilavdzice

1
यहाँ एक शानदार वीडियो है जो बताता है कि यह एक अच्छा विचार क्यों है और दिखाता है कि कैसे आवश्यकता होती है angJJS youtube.com/watch?v=4yulGISBF8w#t=142
gskalinskii

2
@VitalyB अच्छा लेख! मैं छोटे टुकड़ों में एप्लिकेशन लोड करने का पक्ष लेता हूं। यह जल्द ही कुछ भी खर्च नहीं करेगा । बिल्ली, यह मेरे लिए अभी कुछ भी खर्च नहीं करता है।
dsign

जवाबों:


224

हाँ, यह उन घटकों angular.jsके साथ उपयोग करने के लिए समझ में आता है जिनका require.jsआप require.jsघटकों को संशोधित करने के लिए उपयोग कर सकते हैं ।

एक बीज परियोजना है जो उपयोग करती है both angular.js and require.js


108
ऊपर उल्लिखित बीज परियोजना को एक साल तक छुआ नहीं गया है, इसलिए मैंने नवीनतम एंगुलरजेएस और रिक्जेजेएस का उपयोग करके एक नया बनाया है जो कि टेस्टास्कुलर-संचालित परीक्षण के लिए पूर्ण समर्थन के साथ है।
tnajdek

2
@tnajdek, मैंने अंशु के उत्तर के लिंक को आपके द्वारा सुझाए गए बिंदु पर अपडेट किया।
डेविड नदियों

7
ध्यान दें कि उन बीज परियोजनाओं में से कोई भी कोणीय टीम द्वारा समर्थित नहीं है। आवश्यकता एक ऐसा पैटर्न है जो अन्य संदर्भों में अधिक समझ में आता है, और इसे कोणीय में जूता देना, IMHO, एक सर्वोत्तम अभ्यास नहीं है।
एक्सएमएल

2
ब्रैड ग्रीन और श्याम शेषाद्रि (इस वर्ष के अप्रैल को रिलीज़) की ओ 'रेली एंगुलरजेएस पुस्तक भी एक कोणीय परियोजना के विकास में जल्द हीJJS को जोड़ने की सिफारिश करती है, और विवरणों को स्पष्ट रूप से बताती है।
19

1
मैं बहुत बल्कि निर्माण समय में सब कुछ करना चाहते हैं 1. browserify.org 2. npmjs.org/package/gulp-angular-filesort
ए-Dubb

150

यह समझने के लिए कि मुझे ओपी का प्रश्न वास्तव में क्या है:

अगर मैं मुख्य रूप से Angular 1.x में एक एप्लिकेशन बना रहा हूं, और (संक्षेप में) ग्रंट / गुलप / ब्रोकोली और बोवर / NPM के युग में ऐसा कर रहा हूं, और मेरे पास कुछ अतिरिक्त लाइब्रेरी निर्भरता है, तो मुझे स्पष्ट, विशिष्ट जोड़ने की आवश्यकता है आवश्यकता के बिना कोणीय का उपयोग करके मुझे जो भी मिलता है उससे परे मूल्य?

या, एक और तरीका रखो:

" अगर मुझे मूल स्क्रिप्ट-लोडिंग से निपटने के अन्य तरीके हैं , तो क्या वैनिला कोणीय को बुनियादी कोणीय घटक-लोडिंग को प्रभावी ढंग से प्रबंधित करने की आवश्यकता है ? "

और मेरा मानना ​​है कि इसका मूल उत्तर यह है: "जब तक आपको कुछ और नहीं मिल रहा है, और / या आप नए, अधिक नए टूल का उपयोग करने में असमर्थ हैं।"

आइए शुरू में स्पष्ट हो जाएं: आवश्यकताएँ एक महान उपकरण है जो कुछ बहुत ही महत्वपूर्ण समस्याओं को हल करता है, और हमें उस सड़क पर ले जाना शुरू कर रहा है जो हम अधिक स्केलेबल, अधिक पेशेवर जावास्क्रिप्ट अनुप्रयोगों की ओर ले जा रहे हैं। महत्वपूर्ण रूप से, यह पहली बार था जब कई लोगों को मॉडर्नाइजेशन की अवधारणा का सामना करना पड़ा और चीजों को वैश्विक दायरे से बाहर करना पड़ा। इसलिए, यदि आप एक जावास्क्रिप्ट एप्लिकेशन बनाने जा रहे हैं जिसे स्केल करने की आवश्यकता है, तो आवश्यकता है और एएमडी पैटर्न ऐसा करने के लिए खराब उपकरण नहीं हैं।

लेकिन, क्या एंगुलर के बारे में कुछ खास है जो आवश्यकता / एएमडी को विशेष रूप से अच्छा बनाता है? नहीं, वास्तव में, कोणीय आपको अपने स्वयं के मॉडर्नाइजेशन और एनकैप्सुलेशन पैटर्न प्रदान करता है, जो कई मायनों में एएमडी के बुनियादी मॉड्यूलरीकरण सुविधाओं को बेमानी प्रदान करता है। और, एंगुलर मॉड्यूल को एएमडी पैटर्न में एकीकृत करना असंभव नहीं है, लेकिन यह थोड़ा है ... बारीक है। आप निश्चित रूप से अच्छी तरह से एकीकृत करने के लिए दो पैटर्न प्राप्त करने में समय बिताएंगे।

स्वयं कोणीय टीम के कुछ परिप्रेक्ष्य के लिए, यह है , ब्रायन फोर्ड से, कोणीय बटरेंग के लेखक और अब कोणीय कोर टीम के सदस्य:

मुझे AngularJS के साथ आवश्यकताएँ का उपयोग करने की अनुशंसा नहीं है। हालाँकि यह निश्चित रूप से संभव है, लेकिन मैंने ऐसा कोई उदाहरण नहीं देखा है जहाँ आवश्यकताएँ प्रैक्टिस में फायदेमंद हों।

तो, AngularJS के बहुत विशिष्ट प्रश्न पर: कोणीय और आवश्यकता / AMD ऑर्थोगोनल हैं, और अतिव्यापी स्थानों में। आप उन्हें एक साथ उपयोग कर सकते हैं, लेकिन कोई कारण नहीं है जो विशेष रूप से स्वयं कोणीय / प्रकृति के पैटर्न से संबंधित है।

लेकिन स्केलेबल जावास्क्रिप्ट अनुप्रयोगों के लिए आंतरिक और बाहरी निर्भरता के बुनियादी प्रबंधन के बारे में क्या? वहाँ वास्तव में मेरे लिए कुछ महत्वपूर्ण करने की आवश्यकता नहीं है?

मैं Bower और NPM और विशेष रूप से NPM की जाँच करने की सलाह देता हूँ। मैं इन उपकरणों के तुलनात्मक लाभों के बारे में एक पवित्र युद्ध शुरू करने की कोशिश नहीं कर रहा हूं। मैं केवल यह कहना चाहता हूं: बिल्ली के लिए त्वचा के अन्य तरीके हैं, और वे तरीके एएमडी / आवश्यकता से भी बेहतर हो सकते हैं। (वे निश्चित रूप से 2015 के अंत में बहुत अधिक लोकप्रिय गति हैं, विशेष रूप से एनपीएम, ईएस 6 या कॉमनजस मॉड्यूल के साथ संयुक्त। एसओ से संबंधित प्रश्न ।)

आलसी-लोडिंग के बारे में क्या?

ध्यान दें कि आलसी-लोडिंग और आलसी-डाउनलोडिंग अलग-अलग हैं। कोणीय के आलसी-लोडिंग का मतलब यह नहीं है कि आप उन्हें सर्वर से सीधे खींच रहे हैं। जावास्क्रिप्ट स्वचालन के साथ एक योमन-शैली के आवेदन में, आप एक ही फाइल में पूरे शेलबैंग को एक साथ समतल और छोटा कर रहे हैं। वे मौजूद हैं, लेकिन तब तक निष्पादित नहीं किए जाते / जब तक जरूरत न हो। गति और बैंडविड्थ सुधार आपको यह करने से प्राप्त होते हैं, विशेष रूप से 20-लाइन नियंत्रक को आलसी-डाउनलोड करने से किसी भी कथित सुधार को बढ़ाते हैं। वास्तव में, उस नियंत्रक के लिए व्यर्थ नेटवर्क विलंबता और ट्रांसमिशन ओवरहेड, नियंत्रक के आकार से अधिक परिमाण का एक आदेश होने जा रहा है।

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

लेकिन मेरे स्थानीय देव बॉक्सन पर विकास के दौरान क्या होगा?

मैं अपने सभी दर्जनों / सैकड़ों स्क्रिप्ट फ़ाइलों को मैन्युअल रूप से उन सभी को अनुक्रमणिका में संलग्न किए बिना कैसे लोड कर सकता हूं?

येओमान के जनरेटर-कोणीय में उप-जनरेटर, या जनरेटर-गल्प-कोणीय में सन्निहित ऑटोमेशन पैटर्न पर, या रिएक्ट के लिए मानक वेबपैक स्वचालन पर एक नज़र डालें । ये आपको या तो एक साफ, स्केलेबल तरीका प्रदान करते हैं: स्वचालित रूप से उस समय फ़ाइलों को संलग्न करते हैं जो घटक पाड़ जाते हैं, या बस उन सभी को स्वचालित रूप से हड़पने के लिए यदि वे कुछ फ़ोल्डर्स में मौजूद हैं / कुछ ग्लोब-पैटर्न से मेल खाते हैं। एक बार बाद वाले विकल्प प्राप्त करने के बाद आपको अपने स्वयं के स्क्रिप्ट-लोडिंग के बारे में सोचने की ज़रूरत नहीं है।

जमीनी स्तर?

आवश्यकता एक महान उपकरण है, कुछ चीजों के लिए। लेकिन जब भी संभव हो अनाज के साथ जाएं, और जब भी संभव हो अपनी चिंताओं को अलग करें। कोणीय को अपने मॉड्यूलर पैटर्न के बारे में चिंता करने दें, और ES6 मॉड्यूल या कॉमनजेस को सामान्य मॉड्यूलर पैटर्न के रूप में उपयोग करने पर विचार करें। आधुनिक ऑटोमेशन टूल को स्क्रिप्ट-लोडिंग और निर्भरता-प्रबंधन के बारे में चिंता करने दें। और अन्य दो चिंताओं के साथ उलझने के बजाय, बारीक तरीके से एस्किंस आलसी-लोडिंग का ख्याल रखें।

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

लेकिन अन्यथा ... आधुनिक स्वचालन वातावरण बनाने के लिए एक नए कोणीय अनुप्रयोग और लचीलेपन के साथ खरोंच से शुरू होने पर ... आपको बहुत सारे अन्य, अधिक लचीले, अधिक आधुनिक विकल्प मिल गए हैं।

(विकसित जेएस दृश्य के साथ रखने के लिए बार-बार अपडेट किया गया।)


1
एनजी-बॉयलरप्लेट सीड प्रोजेक्ट ( github.com/ngbp/ngbp ) एक सिंगल फाइल के साथ एक सिंगल पेज वेबैप भी बनाता है। HTML5 मेनिफेस्ट का उपयोग करना सुनिश्चित करता है कि यह फ़ाइल केवल एक बार प्रति संस्करण लोड की गई है।
फेडेरिको एल्स

2
हालांकि, हमेशा की तरह, <i> यह निर्भर करता है </ i>। कई लोग अपनी संपूर्ण वास्तुकला के लिए आवश्यकता का उपयोग करते हैं, और कोणीय को उस पारिस्थितिकी तंत्र में एकीकृत करने की आवश्यकता होती है। जब आप अलगाव में ऐप्स बना रहे हों, तो यह बहुत अलग स्थिति होती है।
डेव निकोल

2
माना। लेकिन ओपी का जोर ऐसा प्रतीत होता है: "अगर मैं मुख्य रूप से एंगुलर में एक एप्लिकेशन बना रहा हूं, और (स्पष्ट रूप से) ग्रंट के युग में ऐसा कर रहा हूं, और मेरे पास कुछ अतिरिक्त लाइब्रेरी निर्भरताएं हैं, तो स्पष्ट, विशिष्ट मूल्य से परे जोड़ने की आवश्यकता है मुझे आवश्यकता के बिना कोणीय का उपयोग करके क्या मिलता है? " और मुझे विश्वास है, उत्तर है: नहीं। यदि आपके पास 40 बाहरी निर्भरताओं के साथ एक विशाल एप्लिकेशन है, या आप अपने CI वातावरण को नियंत्रित नहीं कर सकते हैं, या आपके बॉस को आवश्यकता होती है, या आपको आवश्यकता है, या कोणीय केवल एक बड़ा अनुप्रयोग का एक टुकड़ा है, आदि, आदि, तो YMMV।
XML

1
लेकिन जब से वह उन सवालों को पूछने के लिए प्रतीत नहीं होता है, और चूँकि वह बैकबोन ऐप के वैकल्पिक संदर्भ का उल्लेख करता है, तो वह पूछता है: "क्या वैनिला कोणीय को इसके घटकों को प्रभावी ढंग से प्रबंधित करने की आवश्यकता है?" और जवाब है: "नहीं जब तक कि आपको कुछ और नहीं मिल रहा है।" इसके अलावा, यह प्रश्न जावास्क्रिप्ट सीआई आंदोलन के कारण आया, जिसमें हमें बुनियादी, भौतिक 'स्क्रिप्ट-लोडिंग' को संभालने के लिए बेहतर तरीके मिले। यदि आपके पास यह समस्या हल है, तो आवश्यकता मूल रूप से निर्भरता-मिलान और एनकैप्सुलेशन के बारे में है। कोणीय आपके लिए उन दोनों चीजों को करता है।
XML

Google इसमें से कुछ में AngularJS प्रोजेक्ट्स में आलसी-लोडिंग का उपयोग करता है, क्योंकि अन्यथा, उपयोगकर्ता पहले पेज लोड पर 24mb फ़ाइलों को डाउनलोड कर रहा होगा (और यह फ़ाइलें uglified और concatenated के साथ है)। हां, जटिल अनुप्रयोगों में, यह सभी अनुभागों को केवल संक्षिप्त करने के लिए नहीं बनाता है, जब उपयोगकर्ता हर यात्रा के साथ खुलने वाले अनुभाग नहीं होंगे।
ngDeveloper 18

136

हाँ, यह समझ में आता है।

कोणीय मॉड्यूल स्क्रिप्ट लोड ऑर्डरिंग या आलसी स्क्रिप्ट लाने की समस्या को हल करने का प्रयास नहीं करते हैं। ये लक्ष्य ऑर्थोगोनल हैं और दोनों मॉड्यूल सिस्टम साथ-साथ रह सकते हैं और अपने लक्ष्यों को पूरा कर सकते हैं।

स्रोत: कोणीय जेएस आधिकारिक वेबसाइट


6
यदि आप प्रति जेएस फ़ाइल में एक मॉड्यूल का उपयोग करते हैं तो आप किसी भी क्रम पर अपने कोणीय मॉड्यूल को लोड कर सकते हैं। लेकिन अगर आप उदाहरण के लिए विभिन्न सेवाओं को अलग-अलग जेएस फाइलों में रखना चाहते हैं, लेकिन आप उन्हें उसी कोणीय मॉड्यूल पर संलग्न करना चाहते हैं, तो आपको सेवाओं की घोषणा से पहले मॉड्यूल की घोषणा को लोड करना होगा। तो यह एक वास्तुकला निर्णय है।
मत्तोहाक

@ टियागो: कृपया उस स्थान का लिंक प्रदान करें, जहाँ से आपने इसे प्राप्त किया था। मेरे द्वारा इसे कहीं भी ढूंढा जा सकता है। मैं यह अनुमान लगा रहा हूं कि यह कोणीय डॉक्स के पुराने संस्करण से आया था, इससे पहले कि कोणीय के पैटर्न के रूप में अच्छी तरह से स्थापित हो गए थे, और इससे पहले कि यह स्पष्ट हो गया कि आवश्यकता से बचने के लिए महत्वपूर्ण फायदे हैं, कम से कम कोणीय घटकों के लिए।
एक्सएमएल

@XMLilley: क्या आप एक लिंक प्रदान कर सकते हैं जो कोणीय का उपयोग करते समय आवश्यकता से बचने के फायदे बताते हैं? मैं अपनी परियोजना में आवश्यकता का उपयोग करने या न करने का निर्णय ले रहा हूं और यह ऐसा लगता है जैसे यह उपयोगी होगा।
ट्रेवर

1
मैं अपनी भाषा में यहां स्पष्ट नहीं था: कोणीय के अपने अंतर्निहित मॉड्यूल-लोडर का लाभ उठाने के लिए महत्वपूर्ण हैं, और कोणीय पैटर्न के अनाज के साथ जा रहे हैं। सवाल यह नहीं है कि क्या आवश्यकता से बचने के लिए, बल्कि जटिलता की एक अतिरिक्त परत को जोड़ने के लिए मूल्य है या नहीं। जो स्पष्ट है वह यह है कि कोणीय के अंतर्निर्मित प्रतिमान एंगुलर के स्वयं के माड्यूल के लोडिंग की आवश्यकता की पूर्ति करेंगे। यदि आवश्यकता को कोणीय संदर्भ के बाहर मॉड्यूल लोड करने के लिए एक उद्देश्य की आवश्यकता होती है, तो ऐसा हो। लेकिन आवश्यकता के लिए कोणीय का उपयोग करना बाहरी है।
XML

6
@XMLilley सभी कोणीय करता है जो आपको निर्भरता इंजेक्शन देता है। मॉड्यूल की वास्तविक लोडिंग आपकी जिम्मेदारी है। आप एक स्क्रिप्ट टैग जोड़कर, एक स्क्रिप्ट बनाने या आवश्यकता का उपयोग करके ऐसा कर सकते हैं। इस पर Angulars मॉड्यूल सिस्टम की कोई राय नहीं है।
जिल्सुपरर्ट

57

मेरा मानना ​​है कि यह एक व्यक्तिपरक प्रश्न है, इसलिए मैं अपनी व्यक्तिपरक राय प्रदान करूंगा।

एंगुलर में एक मॉडर्नाइजेशन मैकेनिज्म होता है। जब आप अपना ऐप बनाते हैं, तो सबसे पहली चीज जो आप करते हैं

var app = angular.module("myApp");

और फिर

app.directive(...);

app.controller(...);

app.service(...);

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

कुछ इस तरह :

var app = angular.module("myApp",["Directives","Controllers","Services"];

कोणीय भी इन मॉड्यूल को लोड करता है (मेमोरी में) उनकी स्क्रिप्ट फ़ाइलों को नहीं।

आलसी लोडिंग स्क्रिप्ट फ़ाइलों के संदर्भ में, फ्रैंक होने के लिए जब तक आप कुछ बहुत बड़ा नहीं लिख रहे हैं यह एक ओवरकिल होगा क्योंकि इसके बहुत ही स्वभाव से कोणीय आपके द्वारा लिखे गए कोड की मात्रा को कम कर देता है। अधिकांश अन्य रूपरेखाओं में लिखा गया एक विशिष्ट एप्लिकेशन को कोणीय में लिखे जाने पर LOC में लगभग 30-50% की कमी की उम्मीद कर सकता है।


5
वास्तव में, यह आवश्यकताओं के साथ लोड मॉड्यूल की तुलना में Angular.js में सेवाओं को बेहतर तरीके से कॉन्फ़िगर करता है। यह $ गुंजाइश और सेवाओं के साथ खेलना आसान बनाता है, जैसा कि मैंने सॉकेट के साथ खेला था ।io
मार्को गॉडनिज़

33

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

AngularJS की अपनी निर्भरता प्रणाली है जो कार्यान्वयन को पुन: उपयोग करने के लिए आपको AngularJS मॉड्यूल को एक नए बनाए गए मॉड्यूल में इंजेक्ट करने देती है। मान लें कि आपने एक "पहला" मॉड्यूल बनाया है जो एक 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 + '!';
    }
  });

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

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

इस लिहाज से यहां वह जगह है, जहां सेजेएसएस आपकी मदद कर सकता है, क्योंकि पेज को एक दूसरे के बीच स्क्रिप्ट निर्भरता को व्यवस्थित करने में मदद करने के लिए पेज को स्क्रिप्ट को इंजेक्ट करने के लिए एक स्पष्ट तरीका प्रदान करता है।

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

// 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 + '!';
      }
    });
});

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

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

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

मेरी ब्लॉग पोस्ट "AngularJS के साथ आवश्यकताएँ की समझ बनाना" के आधार पर , यहाँ लिंक है


2
यह वास्तव में सबसे अच्छा है, जब लिंक सहित, स्टैक ओवरफ्लो पर यहां लिंक की सामग्री को संक्षेप में प्रस्तुत करना। यदि आपका लिंक कभी टूटने वाला था, जो लिंक इंटरनेट पर करते हैं, तो यहां आपका जवाब भविष्य के आगंतुकों के लिए बेकार होगा। सारांश में लाने और इस पोस्ट को बेहतर बनाने के लिए एक संपादन पर विचार करें । सौभाग्य!
jmort253

3
वहाँ तुम जाओ, धन्यवाद jmort253
leog

इन सम्पादनों को बनाने के लिए धन्यवाद और यह बताने की आवश्यकता है कि किस तरह सेजेईआरएस उन मुद्दों से बचने के लिए निर्भरता को प्रबंधित करने में मदद कर सकता है जो अभी भी मौजूद हैं।
jmort253

मैं पूरी तरह सहमत हूं, यदि आप अपने आवेदन में एकाधिक <स्क्रिप्ट> टैग नहीं कर रहे हैं तो बड़े अनुप्रयोगों के लिए इस दृष्टिकोण का उपयोग करना सबसे अच्छा है।
१५

21

जैसा कि @ganaraj ने बताया कि AngularJS के मूल में निर्भरता इंजेक्शन है। आवश्यकताएँ के साथ और बिना टॉय बीज अनुप्रयोगों का निर्माण करते समय, मैंने व्यक्तिगत रूप से यह पाया कि अधिकांश उपयोग के मामलों के लिए आवश्यकता है।

इसका मतलब यह नहीं है कि आवश्यकताएँ लोड करने की क्षमता और विकास के दौरान अपने कोडबेस को साफ रखने के लिए यह आवश्यक नहीं है। R.js अनुकूलक (संयोजन https://github.com/jrburke/r.js बादाम (साथ) https://github.com/jrburke/almond ) एक बहुत ही पतला स्क्रिप्ट लोड हो रहा है कहानी बना सकते हैं। हालाँकि, इसकी निर्भरता प्रबंधन सुविधाएँ आपके एप्लिकेशन के मूल में कोणीय के साथ उतनी महत्वपूर्ण नहीं हैं, आप अन्य क्लाइंट साइड (HeadJS, LABjs, ...) या सर्वर साइड (MVC4 Bundler, ...) स्क्रिप्ट लोडिंग समाधान का भी मूल्यांकन कर सकते हैं। अपने विशेष आवेदन के लिए।


17

हाँ, यह करता है, विशेष रूप से बहुत बड़े एसपीए के लिए।

कुछ परिदृश्य में, आवश्यकताएँ एक जरूरी है। उदाहरण के लिए, मैं AngularJS का उपयोग करके PhoneGap एप्लिकेशन विकसित करता हूं जो Google मानचित्र API का उपयोग करता है। रिक्जेस्ट जैसे एएमडी लोडर के बिना, ऐप केवल लॉन्च पर क्रैश हो जाएगा जब ऑफ़लाइन होगा क्योंकि यह Google मानचित्र एपीआई स्क्रिप्ट को स्रोत नहीं कर सकता है। एक एएमडी लोडर मुझे उपयोगकर्ता को एक त्रुटि संदेश प्रदर्शित करने का मौका देता है।

हालाँकि, AngularJS और EssentialJS के बीच एकीकरण थोड़ा मुश्किल है। मैंने इसे एक कम दर्दनाक प्रक्रिया बनाने के लिए कोणीयाराम बनाया:

http://marcoslin.github.io/angularAMD/


12

संक्षिप्त उत्तर है, यह समझ में आता है। हाल ही में एनजी-कॉन्फिग 2014 में इस पर चर्चा की गई थी। इस विषय पर यहां बात की जा रही है:

http://www.youtube.com/watch?v=4yulGISBF8w


7

यदि आप आलसी लोडिंग कंट्रोलर और निर्देश आदि पर योजना बनाते हैं, तो यह angularjs के साथ आवश्यकता का उपयोग करने के लिए समझ में आता है, जबकि बहुत अधिक आलसी लोडिंग के लिए एकल स्क्रिप्ट फ़ाइलों में एकाधिक आलसी निर्भरता का संयोजन भी करता है। आवश्यकताएँJS में एक अनुकूलन उपकरण है जो संयोजन को आसान बनाता है। देखें http://ify.io/using-requirejs-with-optimisation-for-lazy-loading-angularjs-artefacts/


7

हाँ, यह समझ में आता है कि मुझे Angular के साथ आवश्यकJJS का उपयोग करना पड़ा, मैंने कई तकनीकी समाधानों का परीक्षण करने के लिए कई दिन बिताए।

मैंने सर्वर साइड पर आवश्यकताएँ के साथ एक कोणीय बीज बनाया। बहुत ही सरल। मैं कोई AMD मॉड्यूल के लिए SHIM संकेतन का उपयोग करता हूं और AMD नहीं क्योंकि मुझे लगता है कि दो अलग-अलग निर्भरता इंजेक्शन प्रणाली से निपटना बहुत मुश्किल है।

मैं सर्वर पर js फ़ाइलों को संक्षिप्त करने के लिए ग्रन्ट और r.js का उपयोग करता हूं जो SHIM कॉन्फ़िगरेशन (निर्भरता) फ़ाइल पर निर्भर करता है। इसलिए मैं अपने ऐप में केवल एक js फ़ाइल का संदर्भ देता हूं।

अधिक जानकारी के लिए मेरे github Angular Seed पर जाएँ : https://github.com/matohawk/angular-seed-requirejs


3

मैं आवश्यकताएँ का उपयोग करने से बचूंगा। जिन ऐप्स को मैंने देखा है, वे कई प्रकार के मॉड्यूल पैटर्न आर्किटेक्चर की गड़बड़ी को हवा देते हैं। एएमडी, रिवीलिंग, आईआईएफई के विभिन्न स्वाद आदि, डिमांड पर लोड करने के अन्य तरीके हैं जैसे लोडऑनमांड कोणीय मोड । अन्य सामानों को जोड़ने से आपके कूट में भरा कोड भर जाता है और शोर अनुपात के लिए कम संकेत बन जाता है और आपके कोड को पढ़ना मुश्किल हो जाता है।


2

यहाँ मैं दृष्टिकोण का उपयोग कर रहा हूँ: http://thaiat.github.io/blog/2014/02/26/angularjs-and-requirejs-for-very-large-applications/

पृष्ठ AngularJS + आवश्यकताएँ के एक संभावित कार्यान्वयन को दर्शाता है, जहां कोड को सुविधाओं और फिर घटक प्रकार से विभाजित किया गया है।


3
यहां तक ​​कि जब लिंक प्रश्न का उत्तर देने के लिए जानकारी देता है, तो पृष्ठ के शो का एक स्पष्टीकरण एक सर्वोत्तम अभ्यास है।
जूलियोसेर

1

ब्रायन फोर्ड से उत्तर

AngularJS की अपनी स्वयं की मॉड्यूल प्रणाली है जिसे आमतौर पर RJS जैसी किसी चीज़ की आवश्यकता नहीं होती है।

संदर्भ: https://github.com/yeoman/generator-angular/issues/40


0

मुझे लगता है कि यह आपके प्रोजेक्ट की जटिलता पर निर्भर करता है क्योंकि कोणीय बहुत अधिक मॉड्यूलर है। आपके नियंत्रकों को मैप किया जा सकता है और आप केवल उन जावास्क्रिप्ट वर्गों को अपने index.html पृष्ठ में आयात कर सकते हैं।

लेकिन अगर आपका प्रोजेक्ट बड़ा हो जाता है। या आप इस तरह के परिदृश्य का अनुमान लगाते हैं, आपको आवश्यकता के साथ कोणीय एकीकृत करना चाहिए। में इस लेख आप इस तरह के एकीकरण के लिए एक डेमो एप्लिकेशन देख सकते हैं।

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.