AngularJS App:从JSON加载一次数据并在多个控制器中使用它

Question

我正在使用AngularJS作为框架开发移动应用程序,目前我的结构类似于:

app.config(['$routeProvider', function($routeProvider) {
    $routeProvider
        .when('/', {
            templateUrl : 'pages/home.html',
            controller  : 'homeCtrl'
        })

        .when('/one', {
            templateUrl : 'pages/one.html',
            controller  : 'oneCtrl'
        })

        .when('/two', {
            templateUrl : 'pages/two.html',
            controller  : 'twoCtrl'
        });
}]);

app.controller('homeCtrl', ['$scope', function($scope) {

}]);

app.controller('oneCtrl', ['$scope', function($scope) {

}]);

app.controller('twoCtrl', ['$scope', function($scope) {

}]);

然后我用以下内容显示内容ng-view:

<div class="ng-view></div>

事情进展顺利,但我需要从JSON文件加载数据以填充应用程序的所有内容.我想要的是只做一次 AJAX调用,然后通过我所有不同的控制器传递数据.在我的第一次尝试中,我想创建一个带有$http.get()内部服务的服务,并将其包含在每个控制器中,但它不起作用,因为每次注入和使用服务时它都会产生不同的ajax请求.因为我是新的使用角度我想知道什么是最好的方式或更多的"角度方式"来实现这一点而不会弄乱它.

编辑:我正在添加服务的代码,这只是一个简单的$http.get请求:

app.service('Data', ['$http', function($http) {
    this.get = function() {
        $http.get('data.json')
        .success(function(result) {
            return result;
        })
    }
});

Answer 1

初始化promise一次,并返回对它的引用:

无需初始化另一个承诺.$ http返回一个.

只需.then()致电您的承诺即可修改结果

angular.module('app', [])
  .service('service', function($http){
    this.promise = null;
    function makeRequest() {
         return $http.get('http://jsonplaceholder.typicode.com/posts/1')
             .then(function(resp){
                  return resp.data;
             });
    }
    this.getPromise = function(update){
      if (update || !this.promise) {
         this.promise = makeRequest();
      }
      return this.promise;      
    }
  })

Codepen示例

编辑:您可以考虑使用$ http缓存.它可以达到相同的效果.来自文档:

如果使用尚未填充的相同缓存进行多个相同的请求,则将向服务器发出一个请求,其余请求将返回相同的响应.

Answer 2

试试这个从GET链接获取JSON数据:

(function (app) {
    'use strict';

    app.factory('myService', MyService);

    MyService.$inject = ['$q', '$http'];

    function MyService($q, $http) {
        var data;

        var service = {
            getData: getData
        };

        return service;

        //////////////////////////////////////

        function getData(refresh) {
            if (refresh || !data) {
                return $http.get('your_source').then(function(data){
                    this.data = data;
                    return data;
                })
            }
            else {
                var deferrer = $q.defer();
                deferrer.resolve(data);
                return deferrer.promise;
            }
        }
    }

}(angular.module('app')));

现在,您可以在控制器文件中添加此依赖项并使用:

myService.getData().then(function(data){
    //use data here 
}, function(err){
    //Handle error here
});