AngularJS ऐप्स में घटकों को लागू करने के लिए कुछ सामान्य सिफारिशें प्राप्त करने के लिए बहुत बड़ी मात्रा में मूल्यवान स्रोतों के लिए धन्यवाद:
नियंत्रक
नियंत्रक केवल मॉडल और दृश्य के बीच एक इंटरलेयर होना चाहिए । इसे जितना संभव हो उतना पतला बनाने की कोशिश करें ।
नियंत्रक में व्यावसायिक तर्क से बचने के लिए यह अत्यधिक अनुशंसित है । इसे मॉडल में स्थानांतरित किया जाना चाहिए।
नियंत्रक विधि आह्वान का उपयोग करके अन्य नियंत्रकों के साथ संवाद कर सकता है (संभव है जब बच्चे माता-पिता के साथ संवाद करना चाहते हैं) या $ emit , $ प्रसारण और विधियों पर $ । उत्सर्जित और प्रसारित संदेशों को न्यूनतम रखा जाना चाहिए।
नियंत्रक को प्रस्तुति या DOM हेरफेर के बारे में परवाह नहीं करनी चाहिए ।
नेस्टेड नियंत्रकों से बचने की कोशिश करें । इस मामले में माता-पिता नियंत्रक को मॉडल के रूप में व्याख्या की जाती है। इसके बजाय साझा सेवाओं के रूप में मॉडल इंजेक्ट करें।
स्कोप नियंत्रक में के लिए इस्तेमाल किया जाना चाहिए बंधन दृश्य के साथ मॉडल और
encapsulating देखें मॉडल के लिए के रूप में प्रस्तुति मॉडल डिजाइन पैटर्न।
क्षेत्र
टेम्प्लेट को केवल टेम्प्लेट के रूप में पढ़ें और केवल नियंत्रकों में लिखें । स्कोप का उद्देश्य मॉडल को संदर्भित करना है, न कि मॉडल होना।
जब द्विदिश बाइंडिंग (एनजी-मॉडल) कर रहे हों, तो सुनिश्चित करें कि आप सीधे स्कोप गुणों से बंधे नहीं हैं।
नमूना
एंगुलरजेएस में मॉडल सेवा द्वारा परिभाषित एक सिंगलटन है ।
मॉडल डेटा और प्रदर्शन को अलग करने का एक शानदार तरीका प्रदान करता है।
मॉडल यूनिट परीक्षण के लिए प्रमुख उम्मीदवार हैं, क्योंकि उनके पास आम तौर पर एक ही निर्भरता होती है (घटना के कुछ रूप होते हैं, सामान्य स्थिति में $ rootScope ) और अत्यधिक परीक्षण योग्य डोमेन तर्क होते हैं ।
मॉडल को विशेष इकाई के कार्यान्वयन के रूप में माना जाना चाहिए। यह एकल-जिम्मेदारी-सिद्धांत पर आधारित है। इकाई एक उदाहरण है जो संबंधित तर्क के अपने दायरे के लिए जिम्मेदार है जो वास्तविक दुनिया में एकल इकाई का प्रतिनिधित्व कर सकता है और डेटा और राज्य के संदर्भ में प्रोग्रामिंग दुनिया में इसका वर्णन कर सकता है ।
मॉडल को आपके एप्लिकेशन के डेटा को एन्क्रिप्ट करना चाहिए
और उस डेटा तक पहुंचने और हेरफेर करने के लिए एक एपीआई प्रदान करना चाहिए ।
मॉडल पोर्टेबल होना चाहिए ताकि इसे आसानी से इसी तरह के एप्लिकेशन में पहुंचाया जा सके।
अपने मॉडल में यूनिट लॉजिक को अलग करके आपने इसे ढूंढना, अपडेट करना और बनाए रखना आसान बना दिया है।
मॉडल अधिक सामान्य वैश्विक मॉडल के तरीकों का उपयोग कर सकता है जो पूरे अनुप्रयोग के लिए सामान्य हैं।
निर्भरता इंजेक्शन का उपयोग करके अपने मॉडल में अन्य मॉडलों की रचना से बचने की कोशिश करें अगर यह वास्तव में घटकों के युग्मन को कम करने और यूनिट परीक्षण और प्रयोज्य को बढ़ाने के लिए निर्भर नहीं है ।
मॉडल में इवेंट श्रोताओं का उपयोग करने से बचने की कोशिश करें। यह उन्हें परीक्षण करने के लिए कठिन बनाता है और आम तौर पर एकल-जिम्मेदारी-सिद्धांत के संदर्भ में मॉडल को मारता है।
मॉडल कार्यान्वयन
जैसा कि मॉडल को डेटा और स्थिति के संदर्भ में कुछ तर्क देना चाहिए, इसे अपने सदस्यों तक पहुंच को सीमित करना चाहिए ताकि हम ढीले युग्मन की गारंटी दे सकें।
AngularJS एप्लिकेशन में इसे करने का तरीका कारखाना सेवा प्रकार का उपयोग करके इसे परिभाषित करना है । इससे हम निजी संपत्तियों और विधियों को बहुत आसानी से परिभाषित कर सकते हैं और एक ही स्थान पर सार्वजनिक रूप से सुलभ लोगों को भी लौटा सकते हैं जो इसे डेवलपर के लिए वास्तव में पठनीय बना देगा।
एक उदाहरण :
angular.module('search')
.factory( 'searchModel', ['searchResource', function (searchResource) {
var itemsPerPage = 10,
currentPage = 1,
totalPages = 0,
allLoaded = false,
searchQuery;
function init(params) {
itemsPerPage = params.itemsPerPage || itemsPerPage;
searchQuery = params.substring || searchQuery;
}
function findItems(page, queryParams) {
searchQuery = queryParams.substring || searchQuery;
return searchResource.fetch(searchQuery, page, itemsPerPage).then( function (results) {
totalPages = results.totalPages;
currentPage = results.currentPage;
allLoaded = totalPages <= currentPage;
return results.list
});
}
function findNext() {
return findItems(currentPage + 1);
}
function isAllLoaded() {
return allLoaded;
}
// return public model API
return {
/**
* @param {Object} params
*/
init: init,
/**
* @param {Number} page
* @param {Object} queryParams
* @return {Object} promise
*/
find: findItems,
/**
* @return {Boolean}
*/
allLoaded: isAllLoaded,
/**
* @return {Object} promise
*/
findNext: findNext
};
});
नए उदाहरण पैदा करना
एक फैक्ट्री होने से बचने की कोशिश करें जो एक नया सक्षम फ़ंक्शन देता है क्योंकि यह निर्भरता इंजेक्शन को तोड़ने के लिए शुरू होता है और पुस्तकालय अजीब व्यवहार करेगा, खासकर तीसरे पक्ष के लिए।
एक ही चीज़ को पूरा करने का एक बेहतर तरीका यह है कि फैक्ट्री का उपयोग एपीआई के रूप में वस्तुओं के संग्रह को वापस करने के लिए किया जाए ताकि उनके साथ गेट्टर और सेटर विधियां जुड़ी हों।
angular.module('car')
.factory( 'carModel', ['carResource', function (carResource) {
function Car(data) {
angular.extend(this, data);
}
Car.prototype = {
save: function () {
// TODO: strip irrelevant fields
var carData = //...
return carResource.save(carData);
}
};
function getCarById ( id ) {
return carResource.getById(id).then(function (data) {
return new Car(data);
});
}
// the public API
return {
// ...
findById: getCarById
// ...
};
});
ग्लोबल मॉडल
सामान्य तौर पर ऐसी स्थितियों से बचने और अपने मॉडल को ठीक से डिजाइन करने की कोशिश करें ताकि इसे कंट्रोलर में इंजेक्ट किया जा सके और आपके विचार में इसका उपयोग किया जा सके।
विशेष रूप से कुछ मामलों में आवेदन के भीतर वैश्विक पहुंच की आवश्यकता होती है। इसे संभव बनाने के लिए आप $ rootScope में ' कॉमन ' प्रॉपर्टी को परिभाषित कर सकते हैं और एप्लीकेशन बूटस्ट्रैप के दौरान इसे कॉमनमॉडल से बाँध सकते हैं :
angular.module('app', ['app.common'])
.config(...)
.run(['$rootScope', 'commonModel', function ($rootScope, commonModel) {
$rootScope.common = 'commonModel';
}]);
आपकी सभी वैश्विक विधियां ' सामान्य ' संपत्ति के भीतर रहेंगी । यह किसी प्रकार का नामस्थान है ।
लेकिन किसी भी तरीके को सीधे अपने $ rootScope में परिभाषित न करें । यह अनपेक्षित व्यवहार के कारण हो सकता है जब आपके दृश्य क्षेत्र के भीतर एनकॉडेल निर्देश के साथ उपयोग किया जाता है, आम तौर पर आपके दायरे को कम करके और समस्याओं को ओवरराइड करने के लिए गुंजाइश वाले तरीकों की ओर जाता है।
संसाधन
संसाधन आपको विभिन्न डेटा स्रोतों के साथ सहभागिता करने देता है ।
एकल-जिम्मेदारी-सिद्धांत का उपयोग करके लागू किया जाना चाहिए ।
विशेष रूप से यह HTTP / JSON के समापन बिंदु के लिए पुन: प्रयोज्य प्रॉक्सी है।
संसाधन मॉडल में इंजेक्ट किए जाते हैं और डेटा भेजने / पुनः प्राप्त करने की संभावना प्रदान करते हैं।
संसाधन कार्यान्वयन
एक कारखाना जो एक संसाधन ऑब्जेक्ट बनाता है जो आपको RESTful सर्वर-साइड डेटा स्रोतों के साथ सहभागिता करने देता है।
लौटे संसाधन ऑब्जेक्ट में एक्शन विधियाँ हैं जो निम्न स्तर $ http सेवा के साथ सहभागिता की आवश्यकता के बिना उच्च-स्तरीय व्यवहार प्रदान करती हैं।
सेवाएं
मॉडल और संसाधन दोनों ही सेवाएं हैं ।
सेवाएँ अनसोर्स्ड हैं, कार्यक्षमता की शिथिल युग्मित इकाइयाँ जो स्व-निहित हैं।
सेवाएँ एक सुविधा है जो कोणीय सर्वर साइड से क्लाइंट-साइड वेब ऐप्स पर लाती है, जहां सेवाओं का आमतौर पर लंबे समय से उपयोग किया जाता है।
एंगुलर एप्स में सेवाएं एक स्थानापन्न वस्तु हैं जो निर्भरता इंजेक्शन का उपयोग करके एक साथ वायर्ड की जाती हैं।
कोणीय विभिन्न प्रकार की सेवाओं के साथ आता है। प्रत्येक अपने स्वयं के उपयोग के मामलों के साथ। कृपया विवरण के लिए अंडरस्टैंडिंग सेवा प्रकार पढ़ें ।
अपने आवेदन में सेवा वास्तुकला के मुख्य सिद्धांतों पर विचार करने का प्रयास करें ।
सामान्य रूप से वेब सेवा शब्दावली के अनुसार :
एक सेवा एक अमूर्त संसाधन है जो कार्य करने की क्षमता का प्रतिनिधित्व करता है जो प्रदाताओं संस्थाओं और अनुरोध संस्थाओं के दृष्टिकोण से एक सुसंगत कार्यक्षमता बनाता है। उपयोग किए जाने के लिए, एक सेवा को एक ठोस प्रदाता एजेंट द्वारा महसूस किया जाना चाहिए।
क्लाइंट-साइड संरचना
आवेदन के सामान्य ग्राहक पक्ष में मॉड्यूल में विभाजित किया गया है । प्रत्येक मॉड्यूल को एक इकाई के रूप में परीक्षण योग्य होना चाहिए ।
प्रकार से नहीं, सुविधा / कार्यक्षमता या दृश्य के आधार पर मॉड्यूल को परिभाषित करने का प्रयास करें । देखें Misko की प्रस्तुति जानकारी के लिए।
मॉड्यूल घटकों को पारंपरिक रूप से नियंत्रक, मॉडल, विचार, फ़िल्टर, निर्देश आदि जैसे प्रकारों द्वारा वर्गीकृत किया जा सकता है।
लेकिन मॉड्यूल ही पुन: प्रयोज्य , हस्तांतरणीय और परीक्षण योग्य रहता है ।
डेवलपर्स के लिए कोड के कुछ हिस्सों और इसकी सभी निर्भरताओं को खोजना बहुत आसान है।
कृपया विवरण के लिए कोड ऑर्गनाइजेशन इन लार्ज एंगुलरजेएस और जावास्क्रिप्ट एप्लिकेशन देखें।
फ़ोल्डरों की संरचना का एक उदाहरण :
|-- src/
| |-- app/
| | |-- app.js
| | |-- home/
| | | |-- home.js
| | | |-- homeCtrl.js
| | | |-- home.spec.js
| | | |-- home.tpl.html
| | | |-- home.less
| | |-- user/
| | | |-- user.js
| | | |-- userCtrl.js
| | | |-- userModel.js
| | | |-- userResource.js
| | | |-- user.spec.js
| | | |-- user.tpl.html
| | | |-- user.less
| | | |-- create/
| | | | |-- create.js
| | | | |-- createCtrl.js
| | | | |-- create.tpl.html
| |-- common/
| | |-- authentication/
| | | |-- authentication.js
| | | |-- authenticationModel.js
| | | |-- authenticationService.js
| |-- assets/
| | |-- images/
| | | |-- logo.png
| | | |-- user/
| | | | |-- user-icon.png
| | | | |-- user-default-avatar.png
| |-- index.html
कोणीय एप्लिकेशन संरचना का अच्छा उदाहरण कोणीय-ऐप द्वारा कार्यान्वित किया जाता है - https://github.com/angular-app/angular-app/tree/master/client/src
यह आधुनिक एप्लिकेशन जनरेटर द्वारा भी माना जाता है - https://github.com/yeoman/generator-angular/issues/109
