3

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

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

最好的方法是什么？

4

2 回答 2

2

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

我查看了本教程中使用的代码的 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'];​

编辑

对于资源调用，我现在有一个像这样使用它们的服务。抱歉，它在咖啡脚本中

.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
    }
)
于 2012-09-07T05:15:38.123 回答
0
  1. 将您的共享资源放入服务中（这几乎总是您在控制器之间共享数据的方式）。
  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 分支缺少很多很酷的东西......可能包括这个。

于 2013-06-25T15:40:12.300 回答