AngularJS 应用程序：从 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 请求。由于我是使用 angular 的新手，我想知道在不搞砸的情况下，实现这一目标的最佳方式或更“角度方式”是什么。

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

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

Answer 1

初始化一次promise，并返回一个对它的引用：

不需要初始化另一个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 example

编辑：您可以考虑改用 $http 缓存。它可以达到相同的效果。 From the docs:

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

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
});