javascript - Angularjs:在服务中加载数据然后将其加载到 Controller

Question

我在网上检查了几个解决方案，但我不太明白如何阻止 Controller 加载。所以，我创建了一个 plunkr 来突出显示我想做的事情。

基本上:我想将所有数据加载到服务中，然后将该数据从该服务传递到每个 Controller 。当应用首次加载时，因为它是异步的，所以首先加载 Controller 。

我本可以只在每个 Controller 中使用工厂，但我想将该数据保存在服务的“allProducts”属性中。我看不出每次加载 View 时都需要调用工厂函数。

在示例中，我也尝试过 $q 服务，但在我看来它与工厂的 http 具有相同的行为并且仍然需要在每个 View 加载时调用 http 请求...

那么，有人可以帮我解决这个例子并实现一个优雅的解决方案吗？

app.factory('productsFactory', ['$http', '$q',
    function($http, $q) {
        var cachedData; //here we hold the data after the first api call  
        function getData(callback) {
            if (cachedData) {
                callback(cachedData);
            } else {
                $http.get('http://api.bestbuy.com/v1/products(longDescription=iPhone*|sku=7619002)?show=sku,name&pageSize=15&page=5&apiKey=bqs7a4gwmnuj9tq6bmyysndv&format=json')
                    .success(function(data) {
                        cachedData = data; //caching the data in a local variable
                        callback(data);
                    });
            }
        }

        return {
            getProds: getData
        }
    }
])

app.service('appService', ['productsFactory', '$q',
    function(productsFactory, $q) {
        var _this = this;
        productsFactory.getProds(function(data) {
            _this.allProducts = data; //wait for data to load before loading the controllers
        })

    }
])

app.controller('productsCtrl', ['$scope', 'appService',
    function($scope, appService) {
        $scope.myProducts = appService.allProducts;
    }
]);

plunkr 在这里:http://plnkr.co/edit/ZvtYwXHSasC3fCAZKkDF?p=preview

Answer 1

我实际上并没有测试它，但看起来您需要创建并返回一个 promise ，以便在数据可用时返回数据。

    app.factory('productsFactory', ['$http', '$q',
    function($http, $q) {

        var cachedData; //here we hold the data after the first api call  
        function getData(callback) {
var d = $q.defer();
            if (cachedData) {
d.resolve(callback(cachedData));

            } else {
                $http.get('http://api.bestbuy.com/v1/products(longDescription=iPhone*|sku=7619002)?show=sku,name&pageSize=15&page=5&apiKey=bqs7a4gwmnuj9tq6bmyysndv&format=json')
                    .success(function(data) {
                        cachedData = data; //caching the data in a local variable
                        d.resolve(callback(cachedData));
                    });
            }
return d.promise;
        }

        return {
            getProds: getData
        }
    }
])

app.service('appService', ['productsFactory', '$q',
    function(productsFactory, $q) {
        var _this = this;
        productsFactory.getProds(function(data) {
            _this.allProducts = data; //wait for data to load before loading the controllers
        })

    }
])

app.controller('productsCtrl', ['$scope', 'appService',
    function($scope, appService) {
        $scope.myProducts = appService.allProducts;
    }
]);