অ্যাংুলারজেএস অ্যাপ্লিকেশনগুলিতে উপাদানগুলি প্রয়োগ করার জন্য প্রচুর মূল্যবান উত্সের জন্য আমি কিছু সাধারণ সুপারিশ পেয়েছি:
নিয়ামক
নিয়ামকটি মডেল এবং দর্শনের মধ্যে কেবল একটি ইন্টারলেয়ার হওয়া উচিত । এটি যতটা সম্ভব পাতলা করার চেষ্টা করুন ।
নিয়ামকটিতে ব্যবসায়িক যুক্তি এড়াতে এটির উচ্চ প্রস্তাব দেওয়া হয় । এটি মডেল স্থানান্তরিত করা উচিত।
নিয়ন্ত্রক পদ্ধতি আবাহন (সম্ভাব্য যখন শিশু পিতা বা মাতা সঙ্গে যোগাযোগ করতে চায়) অথবা ব্যবহার করে অন্যান্য কন্ট্রোলার সঙ্গে যোগাযোগ করতে পারে $ নির্গত , $ সম্প্রচারের এবং $ উপর পদ্ধতি। নিঃসৃত এবং সম্প্রচারিত বার্তাগুলি সর্বনিম্ন রাখা উচিত।
নিয়ন্ত্রকের উপস্থাপনা বা ডিওএম ম্যানিপুলেশন সম্পর্কে যত্ন নেওয়া উচিত নয় ।
নেস্টেড কন্ট্রোলারগুলি এড়ানোর চেষ্টা করুন । এক্ষেত্রে প্যারেন্ট কন্ট্রোলারকে মডেল হিসাবে ব্যাখ্যা করা হয়। পরিবর্তে ভাগ করা পরিষেবা হিসাবে মডেলগুলি ইনজেক্ট করুন।
উপস্থাপনা মডেল ডিজাইনের ধরণ হিসাবে ভিউ মডেলকে ভিউ এবং
এনক্যাপসুলেটিং সহ মডেলকে বাঁধাই করার জন্য কন্ট্রোলার স্কোপ ব্যবহার করা উচিত ।
ব্যাপ্তি
স্কোপগুলি কেবলমাত্র টেমপ্লেটগুলিতে পঠনযোগ্য এবং কেবলমাত্র নিয়ামকগুলিতে লেখার জন্য স্কোপের সাথে আচরণ করুন । সুযোগটির উদ্দেশ্যটি মডেলকে উল্লেখ করা, মডেল হওয়া নয়।
দ্বি নির্দেশমূলক বাঁধাইয়ের সময় (এনজি-মডেল) নিশ্চিত হয়ে নিন যে আপনি সরাসরি স্কোপ বৈশিষ্ট্যের সাথে আবদ্ধ না হন।
মডেল
অ্যাঙ্গুলারজেএস-এ মডেল হ'ল পরিষেবা দ্বারা সংজ্ঞায়িত একক সিঙ্গলটন ।
মডেল পৃথক করে ডেটা এবং প্রদর্শনের একটি দুর্দান্ত উপায় সরবরাহ করে।
মডেলগুলি ইউনিট পরীক্ষার প্রধান প্রার্থী, কারণ তাদের সাধারণত একমাত্র নির্ভরতা থাকে (ইভেন্ট ইমিটারের কিছু রূপ, সাধারণ ক্ষেত্রে the রুটস্কোপ ) এবং এতে অত্যন্ত পরীক্ষামূলক ডোমেইন যুক্তি থাকে ।
মডেলটিকে নির্দিষ্ট ইউনিটের বাস্তবায়ন হিসাবে বিবেচনা করা উচিত। এটি একক-দায়িত্ব-নীতি ভিত্তিক। ইউনিট এমন একটি উদাহরণ যা সম্পর্কিত যুক্তির নিজস্ব ক্ষেত্রের জন্য দায়বদ্ধ যা বাস্তব জগতের একক সত্তাকে উপস্থাপন করতে পারে এবং ডেটা এবং স্টেটের ক্ষেত্রে প্রোগ্রামিং বিশ্বে এটি বর্ণনা করতে পারে ।
মডেলটিকে আপনার অ্যাপ্লিকেশনটির ডেটা সজ্জিত করা উচিত
এবং সেই ডেটা অ্যাক্সেস এবং ম্যানিপুলেট করার জন্য একটি এপিআই সরবরাহ করতে হবে।
মডেলটি পোর্টেবল হওয়া উচিত যাতে এটি সহজেই অনুরূপ অ্যাপ্লিকেশনে স্থানান্তর করা যায়।
আপনার মডেলটিতে ইউনিট যুক্তিকে আলাদা করে আপনি সনাক্ত করা, আপডেট করা এবং রক্ষণাবেক্ষণ করা সহজ করে দিয়েছেন made
মডেল আরও সাধারণ গ্লোবাল মডেলগুলির পদ্ধতি ব্যবহার করতে পারে যা পুরো প্রয়োগের জন্য সাধারণ।
আপনার মডেলটিতে নির্ভরতা ইনজেকশন ব্যবহার করে অন্য মডেলগুলির সংমিশ্রণ এড়াতে চেষ্টা করুন যদি এটি উপাদান সংযোজন হ্রাস এবং ইউনিটের পরীক্ষামূলকতা এবং ব্যবহারযোগ্যতা বৃদ্ধিতে সত্যই নির্ভর করে না ।
মডেলগুলিতে ইভেন্ট শ্রোতাদের ব্যবহার এড়াতে চেষ্টা করুন। এটি তাদের পরীক্ষা করা আরও শক্ত করে তোলে এবং সাধারণত একক-দায়বদ্ধতা-নীতি অনুসারে মডেলগুলিকে হত্যা করে।
মডেল বাস্তবায়ন
যেহেতু মডেলটিকে ডেটা এবং রাষ্ট্রের দিক দিয়ে কিছু যুক্তি সজ্জিত করা উচিত, তাই স্থাপত্যিকভাবে এর সদস্যদের অ্যাক্সেসকে সীমাবদ্ধ করা উচিত যাতে আমরা আলগা সংযোগের গ্যারান্টি দিতে পারি।
AngularJS অ্যাপ্লিকেশনে এটি করার উপায় হ'ল এটি কারখানার পরিষেবা ধরণের ব্যবহার করে সংজ্ঞা দেওয়া ine এটি আমাদের ব্যক্তিগত সম্পত্তি এবং পদ্ধতিগুলি খুব সহজেই সংজ্ঞায়িত করতে এবং একক জায়গায় প্রকাশ্যে অ্যাক্সেসযোগ্য একটিকে ফিরিয়ে আনতে সহায়তা করবে যা এটি বিকাশকারীদের জন্য সত্যই পাঠযোগ্য করে তুলবে।
একটি উদাহরণ :
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
};
});
নতুন দৃষ্টান্ত তৈরি করা হচ্ছে
এমন কারখানাটি এড়ানোর চেষ্টা করুন যা নির্ভরযোগ্যতা ইনজেকশনটি ভেঙে ফেলা শুরু করে এবং লাইব্রেরিটি বিশ্রীভাবে আচরণ করবে, বিশেষত তৃতীয় পক্ষের জন্য new
একই জিনিসটি সম্পাদন করার একটি আরও ভাল উপায় হ'ল ফ্যাক্টরিটি তাদের সাথে সংযুক্ত গিটার এবং সেটার পদ্ধতিগুলির সাথে অবজেক্টগুলির সংগ্রহ ফিরিয়ে আনার জন্য একটি API হিসাবে ব্যবহার করা।
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
// ...
};
});
গ্লোবাল মডেল
সাধারণভাবে এ জাতীয় পরিস্থিতি এড়াতে চেষ্টা করুন এবং আপনার মডেলগুলি সঠিকভাবে ডিজাইন করার চেষ্টা করুন যাতে এটি নিয়ামককে ইনজেকশনের মাধ্যমে আপনার দৃষ্টিতে ব্যবহার করা যেতে পারে।
বিশেষ ক্ষেত্রে কিছু পদ্ধতির প্রয়োগের মধ্যে বিশ্বব্যাপী অ্যাক্সেসযোগ্যতার প্রয়োজন। এটি সম্ভব করার জন্য আপনি অ্যাপ্লিকেশন বুটস্ট্র্যাপের সময় ' সাধারণ ' বৈশিষ্ট্যটি $ রুটস্কোপে সংজ্ঞায়িত করতে পারেন এবং এটিকে কমনমোডেলে আবদ্ধ করতে পারেন :
angular.module('app', ['app.common'])
.config(...)
.run(['$rootScope', 'commonModel', function ($rootScope, commonModel) {
$rootScope.common = 'commonModel';
}]);
আপনার সমস্ত বৈশ্বিক পদ্ধতিগুলি ' সাধারণ ' সম্পত্তির মধ্যে থাকবে। এটি একরকম নেমস্পেস ।
তবে সরাসরি আপনার S রুটস্কোপে কোনও পদ্ধতি নির্ধারণ করবেন না । আপনার দেখার সুযোগের মধ্যে এনজিএমডেল নির্দেশের সাথে ব্যবহার করার সময় এটি অপ্রত্যাশিত আচরণের দিকে পরিচালিত করতে পারে, সাধারণত আপনার সুযোগ ফাঁক করে এবং স্কোপ পদ্ধতিগুলি ওভাররাইড সংক্রান্ত সমস্যাগুলিতে নিয়ে যায়।
সংস্থান
রিসোর্স আপনাকে বিভিন্ন ডেটা উত্সের সাথে ইন্টারঅ্যাক্ট করতে দেয় ।
একক দায়িত্ব-নীতি ব্যবহার করে প্রয়োগ করা উচিত ।
বিশেষ ক্ষেত্রে এটি HTTP / JSON শেষের পয়েন্টগুলির জন্য পুনরায় ব্যবহারযোগ্য প্রক্সি।
সংস্থানগুলি মডেলগুলিতে ইনজেকশন করা হয় এবং ডেটা প্রেরণ / পুনরুদ্ধারের সম্ভাবনা সরবরাহ করে।
রিসোর্স বাস্তবায়ন
এমন একটি কারখানা যা একটি রিসোর্স অবজেক্ট তৈরি করে যা আপনাকে RESTful সার্ভার-সাইড ডেটা উত্সগুলির সাথে ইন্টারঅ্যাক্ট করতে দেয়।
প্রত্যাশিত রিসোর্স অবজেক্টে অ্যাকশন পদ্ধতি রয়েছে যা নিম্ন স্তরের $ http পরিষেবাটির সাথে ইন্টারেক্ট করার প্রয়োজন ছাড়াই উচ্চ-স্তরের আচরণ সরবরাহ করে।
সেবা
মডেল এবং সংস্থান উভয়ই পরিষেবা ।
সার্ভিস unassociated হয় ঢিলেঢালাভাবে মিলিত কার্যকারিতা ইউনিট স্বয়ংসম্পূর্ণ হয়।
পরিষেবাদি এমন একটি বৈশিষ্ট্য যা অ্যাংুলার সার্ভার দিক থেকে ক্লায়েন্ট-সাইড ওয়েব অ্যাপ্লিকেশনগুলিতে নিয়ে আসে, যেখানে পরিষেবাগুলি দীর্ঘকাল ধরে সাধারণত ব্যবহৃত হয়ে আসছে।
কৌণিক অ্যাপ্লিকেশনগুলিতে পরিষেবাগুলি হ'ল বিকল্প পদার্থ যা নির্ভরতা ইনজেকশন ব্যবহার করে একসাথে তারযুক্ত হয়।
কৌণিক বিভিন্ন ধরণের পরিষেবা নিয়ে আসে। প্রতিটি নিজস্ব ব্যবহারের ক্ষেত্রে। অনুগ্রহ করে পড়ুন বোঝাপড়া পরিষেবা প্রকারভেদ বিস্তারিত জানার জন্য।
আপনার আবেদনে পরিষেবা আর্কিটেকচারের মূল নীতিগুলি বিবেচনা করার চেষ্টা করুন ।
ওয়েব সার্ভিসেস গ্লোসারি অনুসারে সাধারণভাবে :
একটি পরিষেবা একটি বিমূর্ত সংস্থান যা সরবরাহকারীর সত্তা এবং প্রয়োজনীয়কারী সত্তার দৃষ্টিকোণ থেকে সুসংগত কার্যকারিতা গঠন করে এমন কার্য সম্পাদনের সক্ষমতা উপস্থাপন করে। ব্যবহার করতে, একটি পরিষেবা অবশ্যই একটি কংক্রিট সরবরাহকারী এজেন্ট দ্বারা উপলব্ধি করা উচিত।
ক্লায়েন্ট-পাশের কাঠামো
সাধারণ ক্লায়েন্টের ক্ষেত্রে অ্যাপ্লিকেশনটির মডিউলগুলিতে বিভক্ত হয় । প্রতিটি মডিউল ইউনিট হিসাবে টেস্টযোগ্য হওয়া উচিত ।
বৈশিষ্ট্য / কার্যকারিতা বা দেখার উপর নির্ভর করে মডিউলগুলি সংজ্ঞায়িত করার চেষ্টা করুন , টাইপ অনুসারে নয়। বিশদ জন্য মিসকো উপস্থাপনা দেখুন ।
মডিউল উপাদানগুলি নিয়ন্ত্রক, মডেল, ভিউ, ফিল্টার, নির্দেশিকা ইত্যাদির মতো প্রচলিতভাবে গোষ্ঠীভুক্ত হতে পারে
কিন্তু মডিউল নিজেই রয়ে পুনর্ব্যবহারযোগ্য , হস্তান্তরযোগ্য এবং testable ।
বিকাশকারীদের কোডের কিছু অংশ এবং এর সমস্ত নির্ভরতা খুঁজে পাওয়াও অনেক সহজ।
বিশদের জন্য বৃহত্তর AngularJS এবং জাভাস্ক্রিপ্ট অ্যাপ্লিকেশনগুলিতে কোড সংস্থার উল্লেখ করুন।
ফোল্ডার কাঠামোগত একটি উদাহরণ :
|-- 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
