Question

我的应用程序有多个视图，每个视图都有一个控制器。

我有几个API资源返回标准JSON数组。每当视图发生更改时，都会重新查询资源以查找相当慢的新数据。我更愿意为我的控制器提供API资源，而不是每次都重新查询。

这是最好的方法吗？

Answer 1

如果我理解正确，那么这就是服务的用途。它们有点像控制器共享数据的中心位置。

我查看了jsfiddle以获取本教程中使用的代码：

http://onehungrymind.com/angularjs-communicating-between-controllers/

var myModule = angular.module('myModule', []);
myModule.factory('mySharedService', function($rootScope) {
    var sharedService = {};

    sharedService.message = '';

    sharedService.prepForBroadcast = function(msg) {
        this.message = msg;
        this.broadcastItem();
    };

    sharedService.broadcastItem = function() {
        $rootScope.$broadcast('handleBroadcast');
    };

    return sharedService;
});

function ControllerZero($scope, sharedService) {
    $scope.handleClick = function(msg) {
        sharedService.prepForBroadcast(msg);
    };

    $scope.$on('handleBroadcast', function() {
        $scope.message = sharedService.message;
    });        
}

function ControllerOne($scope, sharedService) {
    $scope.$on('handleBroadcast', function() {
        $scope.message = 'ONE: ' + sharedService.message;
    });        
}

function ControllerTwo($scope, sharedService) {
    $scope.$on('handleBroadcast', function() {
        $scope.message = 'TWO: ' + sharedService.message;
    });
}

ControllerZero.$inject = ['$scope', 'mySharedService'];        

ControllerOne.$inject = ['$scope', 'mySharedService'];

ControllerTwo.$inject = ['$scope', 'mySharedService'];

修改

对于资源调用，我现在有一个服务，就像这样使用它们。对不起它在coffeescript中

.factory('EventService', (SubEvent, User) -> subevents = {} return { getSubevent: (subevent_id) -> SubEvent.get {subevent_id: subevent_id}, (subevent) -> participants = (participant.user for participant in subevent.participants) User.query {participants: participants}, (users) -> for user,i in users subevent.participants[i].user = user subevents[subevent_id] = subevent } )

Answer 2

将您的共享资源放入服务中（这几乎总是在控制器之间共享数据的方式）。
在服务中缓存结果，因此只需要执行一次昂贵的查询。

由于$http和$resource都支持开箱即用的缓存，因此您无需编写自己的缓存。要调整默认缓存行为，请查看$cacheFactory。

以下是我正在处理的应用程序的示例：

var app = angular.module('app', ['ngResource']);

app
  .factory('Worklogs', function($resource) {
    return $resource('/tempo/worklogs', {}, {
      'query':  {method:'GET', isArray:true, cache: true}
    });
  })
  .controller('FirstCtrl', function($scope, Worklogs, $log, $filter){
    $scope.search = SearchParameters;
    $scope.worklogs = Worklogs.query({dateFrom: $scope.search.dateFrom, dateTo: $scope.search.dateTo});
  })
  .controller('SecondCtrl', function($scope, Worklogs, $log, $filter){
    $scope.search = SearchParameters;
    $scope.worklogs = Worklogs.query({dateFrom: $scope.search.dateFrom, dateTo: $scope.search.dateTo});
  })

控制器第一次加载，每次将新参数传递到query()时，Worklogs服务都会发出HTTP请求。每当更改控制器并重复上一个查询时，都会从缓存中加载工作日志（并且不会发出HTTP请求）。

我正在使用AngularJS 1.1.5，因为1.0.x分支缺少很多很酷的东西......可能包括这个。

AngularJS查询资源一次，并在整个应用程序中使用数据

2 个答案: