विभाजित करें और जीतें या अपने आवेदन को कैसे संरचित करें

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

(function(ng) { var app = ng.app('app', []); // This should be your configuration like a routeProvider or etc. return app; })(angular); 

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

 (function(ng) { var app = ng.app('app.controllers', []); return app; })(angular); 

जैसा कि आप देख सकते हैं, यह मॉड्यूल नियंत्रकों के कार्यान्वयन के लिए जिम्मेदार होगा, जिसे हम नीचे घोषित करेंगे। इसके अलावा अब हम मुख्य मॉड्यूल के आधार पर इस मॉड्यूल को सक्षम कर सकते हैं, जो फॉर्म लेगा:

 (function(ng) { var app = ng.app('app', ['app.controllers']); // This should be your configuration like a routeProvider or etc. return app; })(angular); 

अब हम अपने आवेदन के लिए कुछ नियंत्रकों का वर्णन करेंगे कि हम यह कैसे उपयोग कर सकते हैं। नियंत्रक के नाम के साथ कुछ सम्मेलन होते हैं, अर्थात् एक वर्ग के रूप में ऊंट-केस शैली में। नियंत्रक निर्देशिका MainCtrl.js में एक फ़ाइल बनाते हैं, जिसमें हमारे नियंत्रक तर्क होंगे। इसकी सामग्री कुछ इस प्रकार होगी:

 (function(ng) { var app = ng.app('app.controllers.MainCtrl', []); var MainCtrl = function($scope) { var localScope = { message: 'Message', list: [1,2,3,4,5,6] }; ng.extend($scope, localScope); }; app.controller('MainCtrl', ['$scope', MainCtrl]); return app; })(angular); 

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

 (function(ng) { var app = ng.app('app.controllers', ['app.controllers.MainCtrl']); return app; })(angular); 

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

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

 (function(ng) { var app = ng.app('app.controllers.MainCtrl', []); var MainCtrl = function($scope, $log) { var localScope = { message: 'Message', list: [1,2,3,4,5,6] }; this.nonObservableVar = { one: 1, two: 2 }; this.logger = function(obj) { $log.info(obj); }; ng.extend($scope, localScope); }; app.controller('MainCtrl', ['$scope', '$log', MainCtrl]); return app; })(angular); 

और हमारे विचार में इस कोड का उपयोग करें:

 <div ng-controller="MainCtrl as main"> <div ng-click="main.logger('Test for a one value')">{{ main.nonObservableVar.one }}</div> <div ng-click="main.logger('Test for a two value')">{{ main.nonObservableVar.two }}</div> </div> 

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

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

टिप्पणियों में अपनी प्रतिक्रिया दें।

PS: मैंने यह पोस्ट इसलिए लिखी है ताकि भविष्य में आपके आवेदन को आसानी से बनाए रखा जा सके, ताकि जो आपके आवेदन को संशोधित करेगा, वह समझ सके कि आपके पास क्या और कैसे है =)