Bir yönerge en iyisidir (kural olarak) kısa (kodlu), (potansiyel olarak) tekrar kullanılabilir olduğunda ve işlevsellik açısından sınırlı bir kapsamı olduğunda. UI içeren ve bir servise bağlı olan bir yönerge yapmak (arka uçla bağlantıyı ele aldığımı farz ediyorum), sadece 2 işlevsel rol vermekle kalmaz, yani:
- Pencere aracına ilişkin verilerin görüntülenmesi / girilmesi için kullanıcı arayüzünü denetleme
- Arka uca gönderme (servis aracılığıyla).
aynı zamanda daha az tekrar kullanılabilir hale getirilmesi, başka bir hizmetle veya farklı bir UI ile (en azından kolay değil) tekrar kullanamayacağınız için tekrar kullanılabilir hale getirilmesi.
Bu kararları alırken, genellikle yerleşik HTML öğelerini karşılaştırırım: örneğin <input>, <textarea>veya <form>: belirli bir arka uçtan tamamen bağımsızdırlar. HTML5, <input>öğeye birkaç ek tür vermiştir , örneğin date, arka uçtan bağımsızdır ve verilerin tam olarak nereye gittiğini veya nasıl kullanıldığını. Onlar tamamen arayüz elemanlarıdır. Özel widget'larınız, direktifler kullanılarak oluşturulmuş, mümkünse aynı modeli izlemesi gerektiğini düşünüyorum.
Ancak, bu hikayenin sonu değil. Yerleşik HTML öğeleriyle analojinin ötesine geçerek, her iki hizmeti de çağıran yeniden kullanılabilir yönergeler oluşturabilir ve tıpkı kullanabileceği gibi tamamen bir UI yönergesi kullanabilirsiniz <textarea>. Bazı HTML’leri aşağıdaki gibi kullanmak istediğinizi söyleyin:
<document document-url="'documents/3345.html'">
<document-data></document-data>
<comments></comments>
<comment-entry></comment-entry>
</document>
Yönergeyi kodlamak için, commentEntryyalnızca bir hizmeti bir UI widget'ına bağlayan denetleyiciyi içeren çok küçük bir yönergeyi yapabilirsiniz. Gibi bir şey:
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
});
};
}
};
});
Bunu uç noktalara ng-controllertaşıyarak, HTML’de manuel bir öznitelik sahibi olmanız gerekmeyebilir : her biri doğrudan bir "UI" rolü veya açık bir "veri" rolü olduğu sürece, yönergeleri kullanarak tüm bunları yapabilirsiniz.
Bahsetmem gereken bir olumsuzluk var: uygulamaya biraz daha karmaşıklık katan, daha fazla "hareketli parça" veriyor. Ancak, eğer her bir parçanın net bir rolü varsa ve iyiyse (birim + E2E test edilmiştir), buna değeceğini ve uzun vadede genel bir fayda olduğunu iddia ediyorum.