AngularJS DRY控制器结构 [英] AngularJS DRY controller structure

问题描述

下面再$ P $的code psents如果同一code模式在每一从服务器处理数据控制器重复的情况。在#angularjs经过长期的研究和IRC谈话后，我仍然无法弄清楚如何抽象的code，内联注释说明了情况：

  myApp.controller（TodoCtrl功能（$范围，Restangular，
                                      CalendarService，$过滤器）{
    变种all_todos = [];
    $ scope.todos = [];
    Restangular.all（vtodo /）。的GetList（）。然后（功能（数据）{
        all_todos =数据;
        $ scope.todos = $过滤器（calendaractive）（all_todos）;
    }）;
    //我可以看到自己重复这条线在每一个
    //控制器处理这在某种程度上涉及数据
    //并可能通过CalendarService过滤：
    $ scope.activeData = CalendarService.activeData;
    //也是这一行，这将触发refiltering时
    // CalendarService被其他控制器内重复
    $范围。$表（activeData功能（）{
        $ scope.todos = $过滤器（calendaractive）（all_todos）;
    }，真正的）;}）;//例。另一个控制器，不同的数据，具有日历相同的关系？
myApp.controller（DiaryCtrl功能（$范围，Restangular，
                                       CalendarService，$过滤器）{
    //这个all_object和对象似乎重复，
    //是不是有另一种方式来做到这一点？这样我就可以保持干燥？
    变种all_todos = [];
    $ scope.todos = [];
    Restangular.all（日记/）。的GetList（）。然后（功能（数据）{
        all_diaries =数据;
        $ scope.diaries = $过滤器（calendaractive）（all_diaries）;
    }）;
    $ scope.activeData = CalendarService.activeData;
    $范围。$表（activeData功能（）{
        $ scope.todos = $过滤器（calendaractive）（all_diaries）;
    }，真正的）;
}）;
 

解决方案

DRY应遵循目的地，不热心。您code是罚款，控制器都在做他们应该做的：不同的连接件的应用程序。这就是说，你可以很容易地在返回的功能的参考工厂方法结合重复code。

例如，

  myApp.factory（'calendarScopeDecorator'，函数（CalendarService，Restangular，$过滤器）{
  返回函数（$范围，部分）{
    $ scope.todos = [];
    $ scope.activeData = CalendarService.activeData;
    Restangular.all（节+/）。的GetList（）。然后（功能（数据）{
      $ scope.all_data =数据;
      $ scope.filtered_data = $滤波器（calendaractive）（数据）;
    }）;
    $范围。$表（activeData功能（）{
      $ scope.todos = $过滤器（calendaractive）（$ scope.all_data）;
    }，真正的）;
  }
}）;
 

然后将这一到控制器：

  myApp.controller（DiaryCtrl功能（$范围，calendarScopeDecorator）{
  calendarScopeDecorator（$范围，'日记'）;
}）;
 

The code below represents a situation where the same code pattern repeats in every controller which handles data from the server. After a long research and irc talk at #angularjs I still cannot figure how to abstract that code, inline comments explain the situations:

myApp.controller("TodoCtrl", function($scope, Restangular,
                                      CalendarService, $filter){
    var all_todos = [];
    $scope.todos = [];
    Restangular.all("vtodo/").getList().then(function(data){
        all_todos = data;
        $scope.todos = $filter("calendaractive")(all_todos);
    });
    //I can see myself repeating this line in every 
    //controller dealing with data which somehow relates
    //and is possibly filtered by CalendarService:
    $scope.activeData = CalendarService.activeData;
    //also this line, which triggers refiltering when
    //CalendarService is repeating within other controllers
    $scope.$watch("activeData", function(){
        $scope.todos = $filter("calendaractive")(all_todos);
    }, true);

});

//example. another controller, different data, same relation with calendar?
myApp.controller("DiaryCtrl", function($scope, Restangular,
                                       CalendarService, $filter){
    //this all_object and object seems repetitive,
    //isn't there another way to do it? so I can keep it DRY?
    var all_todos = [];
    $scope.todos = [];
    Restangular.all("diary/").getList().then(function(data){
        all_diaries = data;
        $scope.diaries = $filter("calendaractive")(all_diaries);
    });
    $scope.activeData = CalendarService.activeData;
    $scope.$watch("activeData", function(){
        $scope.todos = $filter("calendaractive")(all_diaries);
    }, true);
});

解决方案

DRY should be followed purposefully, not zealously. Your code is fine, the controllers are doing what they are supposed to be doing: connecting different pieces of the app. That said, you can easily combine repeated code in a factory method that returns a function reference.

For example,

myApp.factory('calendarScopeDecorator', function(CalendarService, Restangular, $filter) {
  return function($scope, section) {
    $scope.todos = [];
    $scope.activeData = CalendarService.activeData;
    Restangular.all(section+"/").getList().then(function(data){
      $scope.all_data = data;
      $scope.filtered_data = $filter("calendaractive")(data);
    });
    $scope.$watch("activeData", function(){
      $scope.todos = $filter("calendaractive")($scope.all_data);
    }, true);
  }
});

And then incorporate this into your controller:

myApp.controller("DiaryCtrl", function($scope, calendarScopeDecorator){
  calendarScopeDecorator($scope, 'diary');
});

这篇关于AngularJS DRY控制器结构的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！