Javascript 理解使用AngularJS承诺，它们将如何帮助解决这个问题

我正在尝试使用Angular应用程序主控制器中的$resource从服务器加载JSON对象。有些路由将分部加载到ng视图中，在该视图中显示数据、分页等

这一切都很好，但我的下一个目标是根据单击的链接过滤数据，并更新URL，以便用户可以链接到过滤后的数据（domain.dev/products/brandname）

只要站点从根URL或任何其他不调用产品路由的URL加载，一切正常，但一旦我尝试从/products加载站点，它就会中断，因为在路由将部分加载到视图之前数据不可用

我想了解的是，承诺是否有助于解决这个问题，如果有，从何着手。我一直在阅读一些关于承诺的文章，我相当肯定这就是答案，但我无法让它与现有代码一起工作

我使用$resource是因为它看起来很干净，但也许$http在这里会更好，因为它有更多的选项

简单地说，当站点从/加载时，一切都很好，因为使用JSON的部分还没有出现，当它们加载时，数据就准备好了。但是，当加载部分的控制器在站点加载时被调用时，数据不在那里，当我尝试设置一些变量时，ProductController抛出一个错误。由于$scope.products不存在，因此它没有长度方法。我用ng show=“products”将部分中的整个代码包装在一个div中，但在本例中，这并不像我预期的那样有效，因为错误似乎是在控制器中抛出的。分部仍然加载，但{{vars}}可见

如能就此提供任何指导，将不胜感激

编辑：我没有试图将URL参数发送到端点，实际上我需要所有的数据，然后使用Angular进行筛选。基本上，我希望主应用程序下载所有数据（不多），并准备好，无论/products/string是否为路径。我的目标是避免对每个过滤器进行HTTP调用。我有工作，但它是太多的延迟，只有几个项目等待HTTP结果。我的主要问题是我可以获取数据，但当数据从服务器返回时，ProductController已经运行并抛出错误。基本上，我希望控制器在尝试运行之前等待数据

编辑2:我发现了问题所在，这更多是我试图构建应用程序的方式。我认为分离代码的最佳方法是将产品放在自己的控制器中，但由于还想预先加载数据，我需要在主appController中调用服务。那是我的错误。一旦我将所有代码移到appController中，并在产品路线中更改了控制器，它就可以按预期工作了。我被要求学习更多关于承诺的知识，这是很好的，我能够利用我所学到的东西。仍然存在过滤问题，但这解决了这个问题

我从这篇文章中得到了一些帮助：

以下是工作代码：

elite.controller('productController', function($scope, $routeParams, $rootScope, $location, Products){
    $scope.brand = $routeParams.brand;

    $rootScope.productPagination = function(){

        $scope.currentPage = 1;
        $scope.numPerPage = 10;
        $scope.maxSize = 6;    
        $scope.totalItems = $rootScope.products.length;
        $scope.numPages =  Math.ceil($scope.totalItems / $scope.numPerPage); 

        $scope.$watch('currentPage + numPerPage', function() {
            var begin = (($scope.currentPage - 1) * $scope.numPerPage)
            , end = begin + $scope.numPerPage;

            $scope.filteredProducts = $rootScope.products.slice(begin, end);
        }); 
    }

    if (!$rootScope.products){
        Products.getProducts().then(function(data){
            $rootScope.products = data.products;
            $rootScope.productPagination();
        });
    }else{
        $rootScope.productPagination();
    }
});

---

以下是迄今为止的应用程序（浓缩）：

var elite=angular.module（“elite”、“ngResource”、“ngSanitize”、“ui.bootstrap”）；
elite.config（['$routeProvider'，函数（$routeProvider）{
$routeProvider.when（“/”{
templateUrl:'partials/home.html'，
控制器：“homeController”
})
$routeProvider.when（“/products”{
templateUrl:'partials/products.html'，
控制器：“productController”
})
$routeProvider.when（“/products/：brand”{
templateUrl:'partials/products.html'，
控制器：“productController”
})
$routeProvider.Others（{重定向到：'/'}）
}]);
elite.工厂（‘产品’、功能（$resource）{
返回$resource（“/products”）
});
elite.controller（'appController'，函数（$scope，$location，$routeParams，Products）{
Products.get（{}，函数（数据）{
$scope.products=data.products；
});  
});
elite.controller（'productController'，函数（$scope、$location、$routeParams、$resource）{
$scope.brand=$routeParams.brand；
$scope.currentPage=1；
$scope.numPerPage=10；
$scope.maxSize=6；
$scope.$watch（$scope.products，function（）{
$scope.numPages=Math.ceil（$scope.products.length/$scope.numPerPage）；
$scope.$watch（'currentPage+numPerPage'，function（）{
var begin=（$scope.currentPage-1）*$scope.numPerPage）
，end=begin+$scope.numPerPage；
$scope.totalItems=$scope.products.length；
$scope.filteredProducts=$scope.products.slice（开始、结束）；
}); 
});
});
{{品牌}}产品。。。
{{products.length}}项
{{产品.品牌}
{{product.title}}
{{product.msrp | currency}

我想改变一下你的例子：

相反：

elite.factory('Products', function($resource){
    return $resource("/products")
}); 

我们可以写：

elite..factory('Products', function($q){

        var data = $resource('/products', {},
        {
          query: {method:'GET', params:{}}}
        );

       // however I prefer to use `$http.get` instead `$resource`

         var factory = {
            query: function (selectedSubject) {
                var deferred = $q.defer();              
                 deferred.resolve(data);                
                return deferred.promise;
            }
        }
        return factory;        
    });

之后，控制器侧：

相反：

Products.get({},function (data){
        $scope.products = data.products;
    }); 

我们得到的答复是：

    Products.query()
                    .then(function (result) {
                      $scope.products = data.products;
                    }, function (result) {
                        alert("Error: No data returned");
                    });

参考

承诺代表一个未来值，通常是异步操作的未来结果，并允许我们定义一旦该值可用，或者当 发生错误

---

我建议你读一读这本很好的热门作品

我想稍微改变一下你的例子：

相反：

elite.factory('Products', function($resource){
    return $resource("/products")
}); 

我们可以写：

elite..factory('Products', function($q){

        var data = $resource('/products', {},
        {
          query: {method:'GET', params:{}}}
        );

       // however I prefer to use `$http.get` instead `$resource`

         var factory = {
            query: function (selectedSubject) {
                var deferred = $q.defer();              
                 deferred.resolve(data);                
                return deferred.promise;
            }
        }
        return factory;        
    });

之后，控制器侧：

相反：

Products.get({},function (data){
        $scope.products = data.products;
    }); 

我们得到的答复是：

    Products.query()
                    .then(function (result) {
                      $scope.products = data.products;
                    }, function (result) {
                        alert("Error: No data returned");
                    });

参考

承诺代表一个未来值，通常是异步操作的未来结果，并允许我们定义一旦该值可用，或者当 发生错误

我建议你读一读这本你可以使用的好书