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

时间:2014-12-04 08:50:13

标签: angularjs angular-ui-router

我在我的角应用程序中使用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知道没有必要提出此请求?

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

1 个答案:

答案 0 :(得分: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]);
            }
        }
    };
}]);