कोणीय बॉयलर सादगी युवाओं का रुझान है

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

प्रेरणा

दिनचर्या को कम से कम करें, एक सहज ज्ञान युक्त वास्तुकला बनाएं, और एक साथ लाएं जो सर्वोत्तम प्रथाओं को कहा जाता है।

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

विशेषताएं

घुरघुराना

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

कुंज

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

Require.js

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

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

<!--Development--> <link rel="stylesheet" href="app/styles/styles.css"> <!--Production--> <link rel="stylesheet" href="app/styles/styles.min.css"> <!--Development--> <script data-main="app/js/app" src="app/lib/requirejs/require.js"></script> <!--Production--> <script src="app/js/app.min.js"></script> 

जो आपको विकास और उत्पादन के बीच स्विच करने की अनुमति देता है।

इसी समय, सभी लाइब्रेरी, मॉड्यूल, आदि एप्लिकेशन इनिशियलाइज़ेशन के दौरान जुड़े हुए हैं, और उनकी सेटिंग्स ऐप में परिभाषित हैं। जेएस फाइल:

 require.config({ baseUrl: 'app', paths: { 'jquery': 'lib/jquery/dist/jquery', 'angular': 'lib/angular/angular', 'text': 'lib/requirejs-text/text' }, shim: { 'jquery': { exports: 'jQuery' }, 'angular': { exports: 'angular', 'deps': ['jquery'] }, 'lib/angular-route/angular-route': { 'deps': ['angular'] } }, config: { 'js/services': { apiUrl: 'http://localhost/api' } } }); 

अगला, फ़ाइलों के माध्यम से जाना।

फ़ाइलें

 /app /js app.js app.min.js controllers.js directives.js filters.js services.js /styles styles.js styles.min.js /templates someone-template.html index.html bower.json package.json .bowerrc Gruntfile.js 

परियोजना की समग्र संरचना विशेष मुद्दों का कारण नहीं होनी चाहिए। सेवाओं, निर्देशों, नियंत्रकों, फिल्टर इसी फ़ाइलों में सेट किए जाते हैं, जो तब स्वचालित रूप से कनेक्ट होते हैं जब एप्लिकेशन लोड होता है:

 var angular = require('angular'), controllers = require('js/controllers'), services = require('js/services'), directives = require('js/directives'), filters = require('js/filters'); ... angular.forEach(services, function (service, name) { $provide.factory(name, service); }); ... angular.forEach(directives, function (directive, name) { app.directive(name, directive); }); angular.forEach(filters, function (filter, name) { app.filter(name, filter); }); angular.forEach(controllers, function (controller, name) { app.controller(name, controller); }); 

मुझे लगता है कि कई, और मैंने खुद, पहले सोचा था कि तर्क को ठीक से कैसे निकालना है जो एक विशिष्ट प्रदर्शन से बंधा नहीं है, लेकिन विश्व स्तर पर निष्पादित किया जाता है। अक्सर इस प्रश्न का उत्तर एक नियंत्रक होता है, जिसे इंडेक्स में कहीं - कहीं एनजी-कंट्रोलर का उपयोग करके कहा जाता है। बेशक यह घातक नहीं है, लेकिन मुझे व्यक्तिगत रूप से लगता है कि यह विकल्प अधिक सही है:

 app.run(controllers.GlobalCtrl); 

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

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

 ... .when('/', { controller: controllers.MainCtrl, template: require('text!templates/main.html') }); ... 

और अंत में, के संबंध में:

 $httpProvider.interceptors.push(['$q', '$error', function ($q, $error) { return { 'request': function (config) { return config; }, 'response': function (response) { return response; }, 'responseError': function (rejection) { $error('Connection error!'); return $q.reject(rejection); } } }]); 

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

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