Açısal denetleyiciyi ince tutun

Question

Şu anda büyük açısal SPA uygulaması üzerinde çalışıyorum. İnce benim denetleyicileri tutmaya çalışın:

<div ng-controller='HomeController as home'> 
    <div ng-repeat='var item in home.items' ng-bind='item' ></div> 
    <button ng-click='home.remove(1)' >remove</button> 
</div> 

function HomeController (homeService){ 
    var vm = this; //$scope 
    vm.items = [1,2,3,4,5]; 
    vm.remove = remove; 

    function remove (id){ 
     homeService.remove({ items: vm.items, targetId: id }); 
    } 

    //a lot of other logic here 
} 


angular.module('my').service('homeService', homeService); 
function homeService(){ 
    this.remove = remove; 

    function remove (param){ 
     for(var a = 0; a < param.items.length; a++){ 
      if(param.items[a] == param.targetId){ 
       param.items.splice(a, 1); 
       break; 
      } 
     } 
    } 
} 

Avantajları:

• Servis değişikliği kapsamı devlet

:

• Mantık dışında kumandanın

Dezavantajları ise

Denetleyicileri ince tutmak için yaklaşımınız nedir?

Answer 1

Denetleyicileri ince tutmak için yaklaşımınız nedir?

Şahsen fabrikalar/hizmet içi uygulama modellerine ilişkin herhangi bir şey tutmak ister. Yani kodunuzda remove ve item denetleyicide tanımlanmayacaktır. Kontrolörün içinde, $scope aracılığıyla erişilebilen direktifler için ihtiyaç duyulan her şey için modele referanslar koyardım. Örnek olarak, bir dizi varlığa ve dizide varlıklar ekleme/çıkarma/bulma yöntemleri ile bir modeli düşünün.

angular.module('myApp').factory('model', function() { 

    // private helpers 
    var add = function(array, element) {...} 
    var remove = function(array, element) {...} 
    var find = function(array, id) {...} 

    return { 
     Entity: function(id) { 
      this.id = id; 
     }, 
     entities: { 
      entities: [], 
      find: function(id) { 
       return find(this.entities, id); 
      }, 
      add: function(entity) { 
       add(this.entities, entity); 
      }, 
      remove: function(entity) { 
       remove(this.entities, entity); 
      }  
     } 
}); 

Sonra kontrolöre modeli geçmesi: Ben ilk onunla çalışmak benim model ve yöntemleri açığa bir fabrika yaratacak

angular.module('myApp').controller('ctrl', function($scope, model) { 
    $scope["model"] = model; // set reference to the model if i have to 
    var entity = new model.Entity('foo'); // create a new Entity 
    model.entities.add(entity); // add entity to entities 
    model.entities.find('foo'); // find entity with id 'foo' 
}); 

vb

Answer 2

Eğer var vm = this; kullandığınız Neden? this'un örnek denetleyiciyi göstereceğini biliyor muydunuz? $scope'un iki yönlü veri bağlaması vardır. Ayrıca, diziden eleman çıkarmak için, bir veya iki çizgi ile yapılabilir. Kontrol ünitesinde kaldırmak yasallık gösteriyor, imo. http://jsfiddle.net/HB7LU/13841/

Answer 3

Ben senin örnekte özledim ilk şey direktifler şunlardır:

benim jsfiddle kontrol edin. Direktifler, kodu yeniden kullanmanıza, html'nizdeki davranışı gizlemenize ve açığa çıkarmanıza olanak veren güçlü bir açısal araçtır. Denetleyicileri zayıf tutmak için mantığınızı direktifler ve servislere ayırmanız gerekir. Ben böyle bir şey ile örnek yazardı: Ben de servise ürün dizisi taşındı

// "home" 
<div ng-controller='HomeController as home'> 
    <my-item ng-repeat='var item in home.items' ng-bind='item'></my-item> 
</div> 

// itemtemplate.html 
<div> 
    {{ item.name }} 
    <button ng-click='remove()' >remove</button> 
</div> 

function HomeController (homeService){ 
    var vm = this; //$scope 
    vm.items = homeService.items; 

    // The idea here is to make this controller 
    // only needed to load content for this route, 
    // all the other logic should be in the directives and services 
} 

angular.module('my').directive('myItem', funcion(homeService){ 
    return { 
     restrict: 'E', 
     templateUrl: 'itemtemplate.html', 
     controller: function(scope, element, attrs) { 
      scope.remove = function(){ 
       homeService.remove(scope.item); 
      } 
     } 
    } 
}) 

angular.module('my').factory('homeService', homeService); 
function homeService(){ 

    var items = []; 

    return { 
     loadItems: function() { 
      items = [... pick the items from server or whatever ...]; 
     }, 

     remove: function() { 
      for(var a = 0; a < this.items.length; a++){ 
       if(this.items[a] == this.targetId){ 
        this.items.splice(a, 1); 
        break; 
       } 
      } 
     } 
    }; 
} 

(çalışmıyor kod, ben mantığı bölme fikrini ilustrate için bir şeyler yazdım) (Ben de bir fabrika için değişti hizmetlerin her bir enjeksiyonla özdeşleştiğini ve öğeleri herkesin kullanımına açık tuttuğunuzu düşündüğümden, bu şekilde diğer kontrolörlerden veya direktiflerden erişilebilir ve denetçinin bununla ilgilenmesi gerekmez.

Answer 4

Yalnızca ince denetleyicileri kullanmayı değil, aynı zamanda denetleyici durumunu denetleyiciden de değiştirmeyi tercih ederim.

function Ctrl($scope, Service) { 
    var ctrl = this; 
    $scope.ctrl = ctrl; 
    Service.getData().then(function() { 
      ctrl.data = Service.data; 
    }) 
} 

function Service ($http) { 
    var data = []; 
    this.getData = function() { 
     return $http.get().then(function(res) { 
       data = res; 
     }); 
    } 
} 

Bu yapı, uygulama veri akışı bir şekilde yönlendirilmesine neden olur.Dolayısıyla veriler her zaman yenileneceğinden ve verilerin nereden geldiğini her zaman izleyebileceğinden eminim.

Elbette bazı dışlamaları olun. Örneğin. Veri kalıcılığına ihtiyacınız yoksa (veriler $ destroy'de kaldırılmalıdır) kontrol cihazında durumu kaydedeceğim.

Ayrıca ben görüntüleme hizmeti detaylı/liste görünümü gibi görünüm durumuna sorumludur Servisi ve veri hizmeti, görüntülemek için bölme Servisi gibi sınıflar vb Saatin ifadeler kullanarak önlemek için kendi olay otobüsü gibi kullanarak da

ve yayın/en yararlı şey direktiflerini ayırmak için vs. $ scope.viewType, $ scope.pageClass gibi tüm bayraklar taşımaktır iver

Daha yayarlar. Bu,