Arahan adalah yang terbaik (sebagai patokan) jika pendek (berdasarkan kode), (berpotensi) dapat digunakan kembali, dan memiliki ruang lingkup terbatas dalam hal fungsionalitas. Membuat arahan yang mencakup UI dan tergantung pada layanan (yang saya asumsikan menangani koneksi ke backend), tidak hanya memberikannya 2 peran fungsional, yaitu:
- Mengontrol UI untuk tampilan / entri data untuk widget.
- Mengirimkan ke backend (melalui layanan).
tetapi juga membuatnya kurang dapat digunakan kembali, karena Anda kemudian tidak dapat menggunakannya lagi dengan layanan lain, atau dengan UI yang berbeda (setidaknya tidak mudah).
Saat membuat keputusan ini, saya sering membandingkan dengan elemen HTML bawaan: misalnya <input>, <textarea>atau <form>: mereka sepenuhnya independen dari backend spesifik. HTML5 telah memberikan <input>elemen beberapa tipe tambahan, misalnya date, yang masih independen dari backend, dan ke mana tepatnya data berjalan atau bagaimana ia digunakan. Mereka murni elemen antarmuka. Widget khusus Anda, dibuat menggunakan arahan, saya pikir harus mengikuti pola yang sama, jika memungkinkan.
Namun, ini bukan akhir dari cerita. Melampaui analogi dengan elemen HTML built-in, Anda dapat membuat arahan yang dapat digunakan kembali yang keduanya memanggil layanan, dan menggunakan arahan UI murni, sama seperti itu mungkin menggunakan a <textarea>. Katakanlah Anda ingin menggunakan beberapa HTML sebagai berikut:
<document document-url="'documents/3345.html'">
<document-data></document-data>
<comments></comments>
<comment-entry></comment-entry>
</document>
Untuk menyusun commentEntryarahan, Anda bisa membuat arahan yang sangat kecil yang hanya berisi pengontrol yang menghubungkan layanan dengan widget UI. Sesuatu seperti:
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
});
};
}
};
});
Membawa ini ke ekstrem, Anda mungkin tidak perlu memiliki ng-controlleratribut manual dalam HTML: Anda dapat melakukan semuanya menggunakan arahan, selama masing-masing secara langsung memiliki peran "UI" yang jelas, atau peran "data" yang jelas.
Ada kekurangan yang harus saya sebutkan: itu memberikan lebih banyak "bagian yang bergerak" ke aplikasi, yang menambah sedikit kompleksitas. Namun, jika masing-masing bagian memiliki peran yang jelas, dan baik (unit + E2E diuji), saya berpendapat itu layak dan manfaat keseluruhan dalam jangka panjang.