1

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

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

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

我想了解一个承诺是否有助于解决这个问题，如果有，从哪里开始。我一直在阅读有关 Promise 的内容，我相当确定这是答案，但我无法让它与现有代码一起使用。

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

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

对此的任何指导将不胜感激。

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

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

我从这篇文章中得到了一些帮助：AngularJS：等待异步调用

这是工作代码：

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', function($routeProvider){
    $routeProvider.when('/', {
        templateUrl: 'partials/home.html', 
        controller: 'homeController'
    })

    $routeProvider.when('/products', {
        templateUrl:'partials/products.html', 
        controller: 'productController'
    })

    $routeProvider.when('/products/:brand', {
        templateUrl:'partials/products.html', 
        controller: 'productController'
    })

    $routeProvider.otherwise({redirectTo :'/'})
}]);


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


elite.controller('appController', function($scope, $location, $routeParams, Products){ 

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

elite.controller('productController', function($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(begin, end);
        }); 
    });

});




<div ng-show="products">
    <h2>{{ brand }} products...</h2>
    <h4>{{products.length}} items</h4>

    <pagination ng-show="numPages" total-items="totalItems" page="currentPage" max-size="maxSize" class="pagination-small" boundary-links="true" rotate="false" num-pages="numPages"></pagination>

    <table class="table table-striped">
        <tr ng-repeat="product in filteredProducts">
            <td>{{product.brand}}</td>
            <td>{{product.title}}</td>
            <td ng-bind="product.priceDealer | currency"></td>
            <td>{{product.msrp | currency}}<td>
        </tr>
    </table>
</div>
4

2 回答 2

3

我会改变你的例子：

反而：

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

参考

Promise 代表一个未来值，通常是异步操作的未来结果，并允许我们定义一旦该值可用或发生错误时会发生什么。

我建议你阅读这个很好的presentation热门承诺作品

于 2013-11-09T17:08:08.767 回答
1

您可以使用resolveon$routeProvider来解决此问题。像controller财产一样，有resolve可用的财产。如文件所述

应注入控制器的可选依赖关系映射。如果这些依赖项中的任何一个是承诺，路由器将等待它们全部解决或在控制器实例化之前被拒绝。如果所有的 Promise 都成功解决，则注入已解决的 Promise 的值并触发 $routeChangeSuccess 事件。如果任何一个 Promise 被拒绝， $routeChangeError 事件就会被触发。

你的定义变成

$routeProvider.when('/products/:brand', {
        templateUrl:'partials/products.html', 
        controller: 'productController',
        resolve: {
                    brand:function($resource, $route) {
                       //Get the param values from $route.current.params
                       // implement the method that return a promise which resolves to brand data or product data.

                  }
        },
    })

然后你可以在你的控制器中获取这些数据

function BrandController($scope,brand) {
   //access brand data here
}
于 2013-11-09T17:12:25.303 回答