Angular.js पर एकत्रित कार्य करता है

यह पद एंगुलरज अनुप्रयोगों के निर्माण के मुद्दे के लिए समर्पित होगा। मैं संभावित समाधानों पर विचार करूंगा और समझाऊंगा कि आखिरकार मैंने अपने कुछ प्लगइन्स लिखने का फैसला क्यों किया।



तो, हाल ही में विधानसभा की समस्या को हल करने के लिए इसे आम तौर पर कैसे स्वीकार किया जाता है? Grunt / Gulp प्लगइन्स, आवश्यकता है ।js, ब्राउज़राइज़ सबसे लोकप्रिय विकल्प हैं।



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



यदि आपके पास एक सरल अनुप्रयोग है जिसमें कई फाइलें हैं:

app.js controllers.js services.js directives.js filters.js
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

वह कोई समस्या नहीं है। आप मैन्युअल रूप से उनके कनेक्शन का क्रम उसी ग्रन्ट / गुलप में दर्ज कर सकते हैं।



लेकिन मान लीजिए, यदि आप एक ऐसी वास्तुकला को लागू करना चाहते हैं जिसमें प्रत्येक व्यक्ति सेवा, नियंत्रक, निर्देश आदि, अलग-अलग फाइलों में है, तो यह है:

 app.js controllers/ FirstCtrl.js SecondCtrl.js services/ FirstSrv.js SecondSrv.js
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

तो आप कई कठिनाइयों का सामना करेंगे। अधिकतर, कठिनाई यह होगी कि सभी फाइलों को कैसे सिलाई जाए ताकि कोणीय बिना त्रुटियों के काम करे। तो क्या किया जा सकता है?





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

 angular.module('App').controller('FirstCtrl',function($scope){...});
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

इस स्थिति में, FirstCtrl नियंत्रक बनाने के लिए, आपको पहले उस फ़ाइल को कनेक्ट करना होगा जिसमें App मॉड्यूल घोषित किया गया है:

 angular.module('App',[]);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

सामान्य तौर पर, एक अच्छे तरीके से, परीक्षण सुविधा के कारणों के लिए, मॉड्यूल के घटकों को अलग-अलग मॉड्यूल में इकट्ठा किया जाना चाहिए:

 angular.module('App',['App.controllers','App.services','App.directives','App.filters']);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

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

 app.js controllers/ module.js FirstCtrl.js SecondCtrl.js services/ module.js FirstSrv.js SecondSrv.js
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

जहां क्रमशः मॉड्यूल .js फाइलें होती हैं:

 angular.module('App.controllers',[]);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

और

 angular.module('App.services',[]);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

और फिर आखिरकार उनकी संरचना के साथ और भी अधिक स्वतंत्र मॉड्यूल हो सकते हैं।



इस प्रकार, समस्या को हल करने के लिए नंगे कॉनैट काम नहीं करता ( टिप्पणियों से )। लेकिन यह आवश्यकताएँ .js और Browserify पुस्तकालयों का उपयोग करके किया जा सकता है।



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



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



इस सब में, मैं इस तथ्य से सबसे अधिक भ्रमित था कि शुरू में एंगुलर की अपनी मॉड्यूलर संरचना थी, जो निर्भरता की घोषणा करती है, लेकिन साथ ही साथ बिल्ड ऑर्डर को प्रभावित नहीं कर सकती है।



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

 angular.module('App','/controllers.js','/services.js')
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

प्रसंस्करण के बाद हम निम्नलिखित प्राप्त करते हैं

 angular.module('App.controllers',[]);// controllers.js angular.module('App.services',[]);// services.js angular.module('App',['App.controllers','App.services']);//     ,    
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

नगरपालिका में, अन्य उदाहरणों और सुविधाओं को जीथब पर वर्णित किया गया है, इसलिए मैं वहाँ नहीं रुकता। इसके अलावा, इस दृष्टिकोण का शून्य स्पष्ट है - आपको मूल Angular.js सिंटैक्स में सीधे हस्तक्षेप की आवश्यकता है



और, इसके अलावा, यह सवाल अनैच्छिक रूप से उठता है कि अगर हम Angular.js के सिंटैक्स को जानते हैं, तो हम जानते हैं कि मॉड्यूल और उनकी निर्भरता का वर्णन कैसे किया जाता है, क्यों न कोड को स्कैन करें और इसके विश्लेषण के आधार पर, फाइलों को सही क्रम में व्यवस्थित न करें।



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



उसी समय, परियोजना के अंदर, आप अपनी इच्छानुसार मॉड्यूल और घटकों को रख सकते हैं, और साथ ही साथ कोड में कोई अनावश्यक समावेश नहीं है।



गुल्प के लिए उदाहरण कार्य:

 gulp.task('concat',function(){ gulp.src('/**/*.js') .pipe(concat('app.js')) .pipe(gulp.dest('./build/')); });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

और ग्रंट के लिए:

 grunt.initConfig({ concat: { default_options: { files: { 'build/app.js': 'test/src/complex/**/*.js' } } } });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

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



नतीजतन, एक बार फिर मैं संभावित विकल्पों पर जाऊंगा:

सरल समवर्ती - लागू करने के लिए कठिन,

आवश्यकता.जेएस एक स्थिर पुस्तकालय है, लेकिन अतिरिक्त कोड की आवश्यकता है,

Browserify - आवश्यकता की अपेक्षा कोड थोड़ा छोटा है, लेकिन AMD मॉड्यूल को एकीकृत करने की समस्या है,

NgBuild अनिवार्य रूप से एक ही आवश्यकता / Browserify है, लेकिन लाइब्रेरी अभी तक उपयोगकर्ताओं के साथ अतिवृद्धि नहीं हुई है, इसलिए संभावित नुकसान और कीड़े हैं,

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



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

वह सब है।