AngularJS - एक एप्लिकेशन को मॉड्यूल्स में विभाजित करना और आवश्यकता अनुसार घटकों का उपयोग करना

आवश्यकताएँ के साथ मिलकर में AngularJS का उपयोग करना, हाल ही में वेब अनुप्रयोगों को विकसित करने के लिए एक काफी लोकप्रिय दृष्टिकोण है। और मुख्य मुद्दों में से एक आवेदन की संरचना है। इस तरह के एक आवेदन के लिए एक काफी प्रसिद्ध बीज है, tnajdek / कोणीय-आवश्यकता-बीज , लेकिन यह मुझे सूट नहीं करता है, क्योंकि एप्लिकेशन की कार्यक्षमता में वृद्धि के साथ, यह संरचना बस फाइलों के एक गुच्छा के साथ बंद हो जाएगी, लिपियों का कोई तार्किक अलगाव नहीं होगा और उन्हें प्रबंधित करना मुश्किल होगा।

लक्ष्य एक मॉड्यूलर और लचीले आर्किटेक्चर के साथ एक एप्लिकेशन बनाना था (अच्छी तरह से, बल्कि केवल एप्लिकेशन को तोड़ना तार्किक भाग नहीं है), आवेदन के हिस्सों के बीच निर्भरता का एक सरल और स्पष्ट विवरण के साथ और आवेदन की संरचना पर कोड की निर्भरता को कम करता है।

मॉड्यूल

इस मामले में, यह एप्लिकेशन का एक तार्किक रूप से अलग हिस्सा है, जिसमें घटकों का एक सेट शामिल है:

• ngModule;
• नियंत्रक;
• फ़िल्टर;
• निर्देशक;
• सेवा;
• खाका;
• कन्फ़िग्स - वर्तमान एनमॉड्यूल के लिए कॉन्फिग () और रन () विधियां शामिल हैं।

समस्या

RequrieJS का उपयोग करते समय, एप्लिकेशन फाइलें सबसे अधिक बार किसी न किसी तरह से जुड़ी होती हैं:

require('modules/foo/controller/foo-controller.js'); require('modules/foo/service/foo-service.js'); require('modules/foo/directive/foo-controller.js'); require('text!modules/foo/templates/foo.html'); require('modules/bar/directive/bar-controller.js'); 

स्पष्ट नुकसान हैं:

• कोड परियोजना की संरचना पर बहुत निर्भर है;
• कोड मॉड्यूल के नामों पर बहुत निर्भर है;
• बहुत कुछ आपको अपने हाथों से लिखना होगा।

निर्णय

मॉड्यूल घटक लोड करने के लिए आवश्यकता प्लगइन्स लिखे गए थे।

उदाहरण के लिए, इस तरह के एक आवेदन संरचना है (वैसे, सिम्फनी 2 में बंडलों की संरचना के समान है):

 एप्लिकेशन
    | -मॉड्यूल
    |  | -मेनू
    |  |  | -कंट्रोलर
    |  |  |  | -मेनू-नियंत्रक। जेएस
    |  |  | -मेनू.जेएस    
    |  |    
    |  | -युजर
    |  | -नियंत्रक
    |  |  | -प्रोफाइल.जेएस
    |  | -सूत्र
    |  |  |
    |  |  |  | -मैं.जज
    |  |  |
    |  |  -टैम्पलेट्स
    |  |  |  | -यूज़र-प्रोफाइल। html
    |  |  |
    |  |  | -यूज़र-मेनू 
    |  |  | -सुंदर-मीनू। जेएस
    |  |  | -सुंदर-मेनू। html
    |  | -src
    |  |  | -प्रोसेसर
    |  |  |  | -प्रोफाइल-सूचना। js 
    |  |  | -सक्रिय
    |  |  | -गर्स्ट.जेएस
    |  | -सुअर। जेएस
    |
    |
    | -बूट.जेएस

इस मामले में, हमारे पास 2 मॉड्यूल हैं: उपयोगकर्ता और मेनू । फ़ाइलें /app/modules/menu/menu.js और /app/modules/user/user.js एंगुलरJS मॉड्यूल के आरंभीकरण के साथ स्क्रिप्ट हैं। बाकी सब कुछ - मुझे लगता है कि यह स्पष्ट है

अब आपको सभी घटकों के कनेक्शन को कॉन्फ़िगर करने की आवश्यकता है। यह आवश्यकता के अनुसार किया जाता है:

 requirejs.config({ baseUrl: '/application', paths: { 'text': '../bower_components/requirejs-text/text', // Structure plugins: 'base': '../bower_components/requirejs-angular-loader/src/base', 'template': '../bower_components/requirejs-angular-loader/src/template', 'controller': '../bower_components/requirejs-angular-loader/src/controller', 'service': '../bower_components/requirejs-angular-loader/src/service', 'module': '../bower_components/requirejs-angular-loader/src/module', 'config': '../bower_components/requirejs-angular-loader/src/config', 'directive': '../bower_components/requirejs-angular-loader/src/directive', 'filter': '../bower_components/requirejs-angular-loader/src/filter' }, structure: { prefix: 'modules/{module}', module: { path: '/{module}' }, template: { path: '/resources/views/{template}', }, controller: { path: '/controllers/{controller}' }, service: { path: '/src/{service}' }, config: { path: '/resources/configs/{config}' }, directive: { path: '/resources/directives/{directive}/{directive}' }, filter: { path: '/resources/filters/{filter}' } } }); 

प्रत्येक घटक के सभी पथ मॉड्यूल के भीतर परिभाषित किए गए हैं। बेस.उल के बाद संरचना.प्रिफ़िक्स फ़ील्ड मॉड्यूल रूट का पथ है।

अब, यदि हम फ़ाइल /app/modules/user/user.js : को शामिल करना चाहते हैं /app/modules/user/user.js :
1. aapp.js :

 require('module!user') 

2. aapp / modules / user / controllers / profile.js :

 require('module!@') 

एक मॉड्यूल के भीतर - मॉड्यूल का नाम छोड़ा जा सकता है, '@' वर्ण पर्याप्त है। इस प्रकार, यदि आपको मॉड्यूल का नाम बदलना है - तो आपको कोड बदलने की आवश्यकता नहीं होगी।

अब, यदि हम फ़ाइल /app/modules/user/controllers/profile.js शामिल करना चाहते हैं:
1. aapp.js :

 require('controller!user:profile') 

बृहदान्त्र से पहले - मॉड्यूल का नाम, बृहदान्त्र के बाद - नियंत्रक का नाम।

2 .: aapp / modules / user / user.js :

 require('controller!profile') 

एक मॉड्यूल के ढांचे के भीतर - मॉड्यूल का नाम छोड़ा जा सकता है, बस नियंत्रक का नाम निर्दिष्ट करें। इसके अलावा, यदि नियंत्रक एक स्तर कम है, तो निम्नानुसार कनेक्ट करना संभव है:

 require('controller!additional/path/to/profile') 

इसी तरह, अन्य सभी घटकों के लिए।

परिणाम

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

साथ ही, प्रोजेक्ट को रीसेट करते समय कोई समस्या नहीं होती है। परीक्षण एप्लिकेशन में असेंबली / बिल्ड फ़ोल्डर और असेंबली के लिए ग्रंटफ़ाइल में इकट्ठे प्रोजेक्ट का एक उदाहरण है, लेकिन इसमें कुछ भी असामान्य नहीं है।

संदर्भ:

• प्लगइन्स के साथ भंडार की आवश्यकता होती है- कोणीय-लोडर । आप बोवर का उपयोग करके स्थापित कर सकते हैं;
• परीक्षण आवेदन के साथ भंडार tuchk4 / आवश्यकता-कोणीय-लोडर-बूटस्ट्रैप है ।

हम एक बड़े कॉर्पोरेट अनुप्रयोग में इस दृष्टिकोण का उपयोग करते हैं, इस दृष्टिकोण का समर्थन और विकास समर्थित और विकसित होगा।