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

我正在使用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视图显示内容

：

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

---

初始化承诺一次，并返回对其的引用：

不需要初始化另一个承诺$http返回1

只需添加一个

。然后（）

调用您的承诺即可修改结果

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

<>编辑：您可以考虑使用$HTTP Cache来代替。它可以达到同样的效果

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

---

尝试以下操作以从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
});

---

示例代码中缺少您的服务，这在这里是最有用的。@Didier我建议您将代码文件拆分为不同的控制器，并使用一个服务来获取数据。查看我的服务代码答案如果您不需要修改/处理get响应返回的数据，那么这很好，因为这会返回承诺本身而不是数据，不幸的是，这不是我的情况。谢谢你的回答。这个例子可以扩展到：）是的，它可以扩展，确实这是一个非常好的答案。我没有选择它作为“接受答案”的唯一原因是因为haw-I-的答案已经考虑到了数据可以被处理的事实。再次感谢。我对这个答案投了赞成票，因为@Danemacauley做了额外的努力，并用一个代码笔示例演示了这个想法。非常干净和有效的方法。工作完美！是的，您可以更改代码以格式化数据。只需输入

返回相应数据您的呼叫，如返回myFormatting（相应数据）。AJAX只执行一次，数据被“缓存”并在所有控制器中重用。我认为这很有魅力，可以用几种方法解决这个问题，但我从未想过使用单例模式。谢谢我得到
这是未定义的
行
this.data=data，如果我删除它，那么GET请求会发生多次。有什么想法吗？不需要初始化一个新的承诺，因为$http返回一个承诺，您可以返回一个对该承诺的引用，答案是正确的，但可以更简洁
myService.getData().then(function(data){
    //use data here 
}, function(err){
    //Handle error here
});