Question

我在我的角应用程序中使用ui-router。我像这样定义路由：

angular.module('app.product', [])

.config(['$stateProvider', function($stateProvider) {
  $stateProvider
    .state('product', {
      url: '/product/:product_id',
      templateUrl: 'partial/product',
      controller: 'productCtrl',
      resolve: {
        product: ['$http', '$stateParams',
          function($http, $stateParams) {
            return $http.get('/api/product/' + $stateParams.product_id);
          }]
      }
    })
}])

在某些时候，我使用$state.go('product')手动更改客户端的路由。在这里，我已经在客户端获得了product数据，因此无需额外的$http请求。

在$state.go调用中传递数据的最佳方法是什么，让ui-router知道没有必要提出此请求？

我应该构建一个服务来处理这个吗？

Answer 1

使用服务（类似下面的代码）。请注意，这不在我的头顶。

.config(['$stateProvider', function($stateProvider) {
    $stateProvider
        .state('product', {
            url: '/product/:product_id',
            templateUrl: 'partial/product',
            controller: 'productCtrl',
            resolve: {
                product: ['ProductCache', '$stateParams',
                function(ProductCache, $stateParams) {
                    return ProductCache.getProduct($stateParams.product_id);
                }]
            }
        });
}])
.factory('ProductCache', ['$http', '$q', function($http, $q) {
    var cache = [];
    return {
        getProduct: function(id) {
            // return the product if available, otherwise from the api
            if(!cache[id]){
                return $http.get('/api/product/' + id, function(result){
                    cache[id] = result.product; // or however your api return is structured
                    return cache[id];
                });
            }else{
                // use .when() to ensure a promise is returned to the resolve function
                return $q.when(cache[id]);
            }
        }
    };
}]);

使用ui-router跳过更改路由解析

1 个答案: