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

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

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

只需要对您的承诺进行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; } })调用即可修改结果

<input type="number" placeholder="Min.">

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

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

2 个答案: