एंगुलरजेएस: फाइल कॉन्सटेनेशन ब्रेक मॉड्यूल घोषणा ऑर्डर

Question

मैं अपने कोणीय ऐप के लिए .js फ़ाइलों को जोड़ने के लिए गड़बड़ी का उपयोग कर रहा हूं।

मैंने अभी here पर चर्चा की गई सम्मेलनों का पालन करने के लिए कोडबेस को पार कर लिया है, विशेष रूप से, मेरे कोड को छोटे मॉड्यूल में जोड़कर सुविधाओं का प्रतिनिधित्व करते हैं।

हालांकि, मुझे लगता है कि यदि एक मॉड्यूल घोषित होने से पहले उपभोग किया जाता है, तो मुझे लगता है कि कॉन्सटेनेशन का क्रम ऐप तोड़ने लगता है।

जैसे:

|-- src/ 
| |-- app/ 
| | |-- userProfile/ 
| | | | userProfile.js 
| | | |-- deposits/ 
| | | | |-- depositFormCtrl.js 

कहाँ:

// userProfile.js 
var userProfile = angular.module('userProfile',[]) 

// depositFormCtrl.js 
angular.module('userProfile') 
    .controller('DepositFormCtrl', function($scope) {...}); 

जब घुरघुराना संयोजन करता है, depositFormCtrl.jsuserProfile.js से पहले प्रकट होता है। यह एक त्रुटि फेंक करने के लिए एप्लिकेशन का कारण बनता है, शिकायत:

Uncaught Error: No module: userProfile

मैं RequireJS का उपयोग कर की संभावनाओं के बारे में बात की बहुत सारी देखने/AMD मॉड्यूल के लोड आदेश का प्रबंधन करने के। हालांकि, अक्सर यह कहा गया है कि यह ओवरकिल/आवश्यक नहीं है, as Angular handles this for you।

उदा: कोणीय टीम mentioned के ब्रायन फोर्ड:

My personal take is that RequireJS does too much; the only feature that AngularJS's DI system is really missing is the async loading.

उन्होंने यह भी elsewhere कि वह कोणीय साथ RequireJS की सिफारिश नहीं करता कहा है।

मैंने का उपयोग करने के लिए भी उल्लेख किया है, जैसा कि seed project पर दिखाया गया है। हालांकि, जैसा कि मैं इसे समझता हूं, (वहां थोड़ा आधिकारिक दस्तावेज है) लोडर का उद्देश्य मॉड्यूल को ऑर्डर से बाहर करने की समस्या को हल करना है, बजाय इस्तेमाल किए जाने से पहले संदर्भित किया जा रहा है।

मेरे प्रोजेक्ट में कोणीय-लोडर.जेएस जोड़ना इस मुद्दे को हल नहीं करता है।

क्या कोई घोषणा है जिसका उपयोग मुझे करना चाहिए जो मेरी त्रुटियों को रोकता है?

मॉड्यूल & नियंत्रकों को घोषित करने का सही तरीका क्या है, ताकि ऑर्डर फाइलों को संयोजित किया जा सके, रनटाइम पर कोड को प्रभावित नहीं करता है?

Answer 1

एक तकनीक जिसका मैं कभी-कभी उपयोग करता हूं वह संगत फ़ाइल की शुरुआत में घोषणाएं करना है। मैं उन्हें कि पहले एक संयोजन उपयोगिता द्वारा उठाया जा करने के लिए किया जाएगा एक समर्पित फ़ाइल में डाल कर ऐसा करते हैं।

//app/_declarations.js 
angular.module('userProfile',[]); 

//app/userProfile/userProfile.js 
angular.module('userProfile') 
    .config(['$routeProvider', function ($router) {...}); 

//app/userProfile/deposits/depositFormCtrl.js 
angular.module('userProfile') 
    .controller('DepositFormCtrl', function($scope) {...}); 

सभी परिदृश्यों के लिए उपयुक्त नहीं हो सकता है, लेकिन स्थापित करने और समझने में आसान है।

Answer 2

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

व्यक्तिगत रूप से, मैं कई कारणों से कई फ़ाइलों में एक मॉड्यूल बंटवारे से बचने की कोशिश:

• यह एक मॉड्यूल
• मॉड्यूल हैं से सभी नियंत्रकों/सेवाओं/आदि .. खोजने के लिए मुश्किल हो सकता है बहुत बड़ा हो रहा है, तो शायद इसका मतलब है कि आपको कई मॉड्यूल
• में विभाजित करना चाहिए, यह मॉड्यूल निर्भरताओं की सूची मैन्युअल रूप से घोषित करने और प्रत्येक मॉड्यूल के लिए इंजेक्शन निर्भरताओं की एक सूची घोषित करने के लिए पर्याप्त बोझिल है।कि करने के लिए js निर्भरता RequireJS द्वारा आवश्यक फ़ाइलों की एक सूची में जोड़ें और, आप करेंगे आप अपने समय के सबसे अधिक खर्च करेगा

हालांकि उबाऊ सामान घोषित करने के बजाय व्यापार की समस्याओं को हल करने, अगर आप 1 मॉड्यूल/1 फ़ाइल नियम बनाए रखने के अपने index.html बहुत तेजी से बढ़ते देखें। व्यक्तिगत रूप से, मैं इसे एक बड़ी समस्या के रूप में नहीं मानता।

Answer 3

मैं एक ही मुद्दे में भाग गया। मैं दो कार्यों के लिए मेरे GruntFile.js में संयोजन कदम विभाजित है, तो मेरे app.js, जहाँ मेरे कोणीय आवेदन मध्यवर्ती श्रेणीबद्ध फ़ाइल (_app.js) को परिभाषित किया गया है, 'prepended' है अनिवार्य रूप से है, और परिणाम के साथ सहेजा जाता है मध्यवर्ती फ़ाइल का एक ही नाम, एक अंतिम '_app.js'

में जिसके परिणामस्वरूप मेरी GruntFile.js

.... 
// Concatenate all Angular application JS files into _app.js. Note the use 
// of wildcards to walk the App folder subfolders to pick up all JS files. 
     jsCore: { 
      src: [     
       '<%= meta.appPath%>/**/*.js', 

       // Do not include app.js, since it needs to be prepended to the final concat file 
       '!<%= meta.appPath/app.js', 

       // Do not include config.js, since it will need to be tokenized by RM 
       '!<%= meta.appPath%>/config.js' 
      ], 
      dest: '<%= meta.resPath %>/_app.js' 
     }, 

     // Prepend app.js to the beginning of _app.js, and save result as _app.js. 
     // This keeps Angular happy ... 
     jsApp: { 
      src: [ 
       '<%= meta.appPath%>/app.js', 
       '<%= meta.resPath%>/_app.js' 
      ], 
      dest: '<%= meta.resPath %>/_app.js' 
     } 
... 

परिणामी की मेरी concat खंड में

var TestApp = angular.module('TestApp', [...]); 

उप कार्यों app.js _app.js फ़ाइल ते की घोषणा यानी शुरुआत में app.js का स्रोत है Stapp।

Answer 4

उपयोग घूंट और उसके बाद का उपयोग घूंट-कोणीय-तरह

return gulp.src('./build/src/app/**/*.js') 
     .pipe(sort()) 
     .pipe(plug.concat('concat.js')) 
     .pipe(gulp.dest('./output/'));