AngularJS - 处理 API 数据答案

【问题标题】：AngularJS - Handling API DataAngularJS - 处理 API 数据
【发布时间】：2015-10-20 17:10:39
【问题描述】：

目前正在开发一个需要使用API提取数据的应用程序，并且遇到了以下问题。

在我的控制器中，我从 API 中提取产品列表，将它们添加到 $rootScope，然后循环显示所有产品的列表。

查看单个产品时，我会遍历列表并将具有请求 ID 的产品显示到这样的视图中

getProduct: function(productID) {
            var products = $rootScope.products;
            for (var i =0; i<products.length; i++) {
            if (products[i].id == parseInt(productID)) {
                return products[i];
                }
           }
        }

这一切都很好，除了如果您访问单个产品 URL 而不先通过主列表页面，产品列表将不可用，因为从未调用过 API。

解决此问题的最佳方法是什么？

从此视图创建另一个单独的 API 调用似乎非常混乱且过于复杂，我想知道是否有标准或更好的方法！

【问题讨论】：

标签： angularjs api rest model-view-controller

【解决方案1】：

我将为具有 getter 和 setter 产品的私有数组的产品创建一个角度服务。这将使您避免使用 $rootScope 在控制器之间传递数据（这是一件好事）。

然后有一个函数调用每个产品详细信息页面的 API。然后，您可以使用 $routeParams 将 ID 传递给 URL 中的页面

通过将这一切都放在一个服务中，它可以被所有控制器重用并且非常干净。

var myModule = angular.module('myModule', []);
myModule.service('productService', function() {
    var products = [1,2,3,4,5];
    this.addProduct = function(id){
        products.push(id);
    }

    this.getProducts = function(){
        return products;
    }

    this.getProductDetail = function(id){
        //$http.get(...
    }

});

编辑：按要求实施示例

// Don't forget to inject your service into your controller
myModule.controller('myCtrl', ['productService', function (productService) {
    // Add a product to your array
    productService.addProduct(6); //products = [1,2,3,4,5,6]

    // Retrieve products
    var myProducts = productService.getProducts(); //myProducts = [1,2,3,4,5,6]

    // You can do this a few different ways but assuming 
    // getProductDetail returns a promise from its $http call
    productService.getProductDetail(4).then(function (productDetail) {
        $scope.productDetails = productDetail;
    });

}]);

【讨论】：

你能展示一下控制器如何使用它吗？
我编辑了我的原始示例以展示如何从任何控制器使用它。干杯
今晚没有时间尝试这个，但明天我一定会告诉你我是怎么做的！谢谢一百万
我的问题不在于将数据存储在 $rootScope 中，它不想在每次访问 productDetail 页面时都进行 API 调用，因为从之前已经通过控制器。但是，如果数据还没有被拉入，那么它应该进行 API 调用。
因此，'var products' 将包含获取所有产品的 api 调用的结果，然后使用它来提取各个产品的数据。但是，如果当您尝试访问单个产品页面时产品数组为空，请进行创建产品数组所需的 api 调用，然后从该数组中提取所需的产品。

【解决方案2】：

根据您的答案提出了一个解决方案（消除对 $rootScope 的依赖确实有帮助），因此将您的答案标记为好，但想分享我的想法，以防有人发现它有用！

本质上，在处理显示单个产品的产品详细信息控制器中，我们说，如果我们已经在应用程序中拥有产品信息，则从中提取它，如果没有，则调用 API .

我有一个名为 config 的额外服务，如果有人想知道那里发生了什么，我需要访问我的 API :)

服务

productsApp.factory('$productService', function($q,$http,$rootScope,$cookies,$state,$configService) {

var products = '';

return  {
    //Get all products
    getProducts: function() {
        //$http.get....
        //Dont forget to use $q.defer() for your promise
    },
    returnProducts: function() {
        return products;
    },
    //Get specific product
    getProduct: function(productID) {
            for (var i =0; i<products.length; i++) {
            if (products[i].id == parseInt(productID)) {
                return products[i];
                }
            }   
    }
}
});

控制器

productsApp.controller('productDetailCtrl', function($scope,$rootScope,$productService,$stateParams,$configService,$cookies) {

var products = $productService.returnProducts();


if (products == '') {
    $configService.getToken().then(function(response){
            $productService.getProducts().then(function(response){
                $scope.product=$productService.getProduct($stateParams.productID);
            }, function(error){
                console.log(error);
            });
        }, function(error){
            console.log(error);
        });
} else {
    $scope.product = $productService.getProduct($stateParams.jobID);
};
});

【讨论】：