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 的新手，我想知道什么是最好的方法或更多 "angular way" 来实现这一目标而不会搞砸它。

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

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

Answer 1

初始化承诺一次，return对其的引用：

无需初始化另一个承诺。 $http returns 一个。

只需添加一个 .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:

If multiple identical requests are made using the same cache, which is not yet populated, one request will be made to the server and remaining requests will return the same response.

Answer 2

试试这个从 GET Link 中获取 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
});

AngularJS 应用程序：从 JSON 加载一次数据并在多个控制器中使用它

AngularJS App: Load data from JSON once and use it in several controllers

javascript

angularjs

ng-view