সংক্ষিপ্ত (কোড-ওয়াইজ), (সম্ভাব্য) পুনঃব্যবহারযোগ্য এবং কোনও কার্যকারিতার দিক দিয়ে এর সীমিত সুযোগ থাকতে পারে তখন একটি নির্দেশিকা সেরা (একটি থাম্বের নিয়ম হিসাবে) হয়। এমন নির্দেশিকা তৈরি করা যাতে ইউআই অন্তর্ভুক্ত থাকে এবং কোনও পরিষেবার উপর নির্ভর করে (যে আমি ব্যাকএন্ডের সাথে সংযোগ পরিচালনা করি বলে মনে করি), কেবল এটি কেবল 2 টি কার্যকরী ভূমিকা দেয় না:
- উইজেটের জন্য ডেটা প্রদর্শন / প্রবেশের জন্য ইউআই নিয়ন্ত্রণ করে।
- ব্যাকএন্ডে জমা দেওয়া (পরিষেবাটির মাধ্যমে)।
তবে এটিকে আবার কম ব্যবহারযোগ্য করে তুলছে, কারণ আপনি এটি আর কোনও পরিষেবা বা অন্য কোনও ইউআই দিয়ে (কমপক্ষে সহজেই সহজে না) ব্যবহার করতে পারবেন না।
এই সিদ্ধান্তগুলি নেওয়ার সময়, আমি প্রায়শই অন্তর্নির্মিত এইচটিএমএল উপাদানগুলির সাথে তুলনা করি: উদাহরণস্বরূপ <input>, <textarea>বা <form>: তারা কোনও নির্দিষ্ট ব্যাকএন্ডের থেকে সম্পূর্ণ স্বাধীন। এইচটিএমএল 5 <input>উপাদানটিকে কয়েকটি অতিরিক্ত প্রকার দিয়েছে, যেমন date, যা এখনও ব্যাকএন্ডের থেকে আলাদা এবং যেখানে ডেটা ঠিক যায় বা এটি কীভাবে ব্যবহৃত হয়। এগুলি বিশুদ্ধরূপে ইন্টারফেসের উপাদান। আপনার কাস্টম উইজেটগুলি, নির্দেশাবলী ব্যবহার করে নির্মিত, আমার মনে হয় যদি সম্ভব হয় তবে একই প্যাটার্নটি অনুসরণ করা উচিত।
তবে এটি গল্পের শেষ নয়। অন্তর্নির্মিত এইচটিএমএল উপাদানগুলির সাথে সাদৃশ্য ছাড়িয়ে আপনি পুনরায় ব্যবহারযোগ্য নির্দেশিকা তৈরি করতে পারেন যা উভয়ই পরিষেবাগুলিকে কল করে এবং খাঁটি ইউআই নির্দেশিকা ব্যবহার করতে পারে, যেমন এটি ব্যবহার করতে পারে <textarea>। বলুন যে আপনি নিম্নলিখিত হিসাবে কিছু এইচটিএমএল ব্যবহার করতে চান:
<document document-url="'documents/3345.html'">
<document-data></document-data>
<comments></comments>
<comment-entry></comment-entry>
</document>
commentEntryনির্দেশিকাটি কোড আপ করতে , আপনি একটি খুব ছোট নির্দেশিকা তৈরি করতে পারেন যাতে কেবলমাত্র নিয়ামক থাকে যা কোনও ইউআই-উইজেটের সাথে কোনও পরিষেবাতে লিঙ্ক করে। কিছুটা এইরকম:
app.directive('commentEntry', function (myService) {
return {
restrict: 'E',
template: '<comment-widget on-save="save(data)" on-cancel="cancel()"></comment-widget>',
require: '^document',
link: function (scope, iElement, iAttrs, documentController) {
// Allow the controller here to access the document controller
scope.documentController = documentController;
},
controller: function ($scope) {
$scope.save = function (data) {
// Assuming the document controller exposes a function "getUrl"
var url = $scope.documentController.getUrl();
myService.saveComments(url, data).then(function (result) {
// Do something
});
};
}
};
});
এটি একটি চূড়ান্ত দিকে নিয়ে যাওয়া, আপনার ng-controllerএইচটিএমএলে কোনও ম্যানুয়াল বৈশিষ্ট্য থাকতে হবে না : আপনি প্রত্যক্ষ নির্দেশিকা ব্যবহার করে এটি করতে পারবেন, যতক্ষণ না প্রত্যেকে সরাসরি "স্পষ্ট" ইউআই "ভূমিকা বা পরিষ্কার" ডেটা "ভূমিকা রাখে।
আমার একটি নেতিবাচক দিকটি উল্লেখ করা উচিত: এটি প্রয়োগে আরও "চলন্ত অংশগুলি" দেয় যা কিছুটা জটিলতা যোগ করে। যাইহোক, যদি প্রতিটি অংশের একটি সুস্পষ্ট ভূমিকা থাকে, এবং ভাল (ইউনিট + ই 2 ই পরীক্ষিত) হয় তবে আমি এটি যুক্তিযুক্ত করব যে এটি দীর্ঘকালীন এবং এটির সামগ্রিক উপকার।