AngularJS RequJS ब्राउज़र और जावास्क्रिप्ट मॉड्यूल/वैश्विक स्कोप दुःस्वप्न

Question

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

जिस तरह से मैं वर्तमान में जा रहा हूं (और आपकी सभी रचनात्मक आलोचनाओं के अधीन ...)

मेरे पास मेरे सभी संसाधनों को संक्षिप्त और संक्षिप्त करना है, BreezeJS, $, Q, Ladda, आदि जैसे libs .. । वैश्विक गुंजाइश पर लीक ... तो मैं इन वैश्विक के लिए इस प्रकार के मॉड्यूल की घोषणा:

module.value('gLadda', (function(){ 

    if("Ladda" in window && "Spinner" in window){ 
     return Ladda; 
    }else{ 
     throw new Error("The Globals Ladda || Spinner are missing"); 
    } 

})()); 

के बाद मेरे ऐप मैं "Angularify" निर्भरता के साथ काम में, मैं एक टीम में इस तकनीक का इस्तेमाल नहीं किया है और मैं सोच रहा हूं कि क्या यह कुछ के लिए कुछ लाल रोशनी फायर कर रहा है, और अगर वे समझाएंगे कि क्यों ... आपके समय के लिए धन्यवाद।

Answer 1

एक विशेष अनुरोध से मेरे पास inclusion of an AMD loader अतिरिक्त एनजी-मॉड्यूल के हिस्से के रूप में है।

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

1. अपनी सभी जावास्क्रिप्ट को एक फ़ाइल में स्टोर करें।
2. अपनी जावास्क्रिप्ट को अलग फ़ाइलों में अलग करें और प्रत्येक फ़ाइल के लिए स्क्रिप्ट टैग जोड़ें।
3. स्क्रिप्ट फ़ाइलों और उनकी निर्भरताओं को प्रबंधित करने के लिए requireJS जैसे एएमडी फ़ाइल लोडर का उपयोग करें।
4. नोडजेस शैली फ़ाइलों को एक स्क्रिप्ट फ़ाइल में मर्ज करने के लिए browserify जैसे प्रीकंपेलर का उपयोग करें।

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

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

define(['angular'], function(angular) { 
    return angular.module('myApp.controllers', ['myApp.services']) 
    .controller('MyController', ['$scope', 'myService', 
     function($scope, myService) { 
     $scope.data = myService.getData(); 
     } 
    ]) 
}; 

परिभाषित बयान पर शीर्ष सुनिश्चित करें कि angular इस समारोह को चलाने से पहले आरंभ नहीं हो जाता बनाने के लिए कहते हैं। angular.module कथन '$ scope' और 'myService' को देखने के लिए कहता है और उन्हें $scope और myService चर में इंजेक्ट करता है। समस्या यह है कि एएमडी लोडर ने उस फ़ाइल को प्रारंभ नहीं किया है जो myApp.services को परिभाषित करता है, जिसमें आप अनुमान लगा सकते हैं myService परिभाषित किया गया है, क्योंकि यह ऊपर परिभाषित कथन में प्रकट नहीं हुआ था। यह इंजेक्शन सूची और एएमडी निर्भरता सूची के बीच एक विशाल डिस्कनेक्ट बनाता है। न केवल यह कहना मुश्किल है कि 'myApp।सेवाएं; लोड किया गया है, यह भी कहना मुश्किल है कि 'myApp.services' में कौन से विशेष घटक उपलब्ध हैं। IOW 'myService' दोनों लोड और इंजेक्शन योग्य है?

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

मैं इस लिखित रूप में इन लेखों उपयोगी पाया:

https://github.com/marcoslin/angularAMD

http://weblogs.asp.net/dwahlin/archive/2013/05/22/dynamically-loading-controllers-and-views-with-angularjs-and-requirejs.aspx