美文网首页
ui-route + resolve + factory

ui-route + resolve + factory

作者: 赵碧菡 | 来源:发表于2017-07-10 11:54 被阅读0次
    由列表页跳转详情页

    路由

    .state('home.product',{
      url:'/product/:id',
      templateUrl:'template/pages/home.product.html',
      resolve:{
       productsObj:function(getProduct){
    //getProduct 自己定义的服务,getRequest()服务中定义的方法用来请求数据
        return getProduct.getRequest().then(function(data){
                return data;
       });      
      }
    },
    controller:function($scope,$stateParams,productsObj,$window,funSer){
    // funSer 自己定义的服务 ItemId服务中的方法通过id获取数据
      $scope.product= funSer.ItemId(productsObj,$stateParams.id);
                 }
       })
    
    

    服务 -------- funSer

    factory('funSer',function(){
        return {
                //通过ID查询某个产品
                ItemId: function (arr, id) {
                    var obj = null;
                    angular.forEach(arr, function (item) {
                        if (item.productId == id) {
                            obj = item;
                            return;
                        }
                    })
                    return obj;
                }
            }
        });
    
    

    服务 -------- getProduct

    factory("getProduct",function($q,$http){
        var getRequest=function(){
                    var deferred=$q.defer();//创建deferred对象
                    $http({
                        url:'data/product.json',
                        method:'GET'
                    }).success(function(data){
                        deferred.resolve(data.all_products);
    
                    }).error(function(reason){
                        deferred.reject(reason);
                    });
    
                    return deferred.promise;
                }
                return {
                    getRequest:getRequest
                }
    
            });
    
    

    相关文章

      网友评论

          本文标题:ui-route + resolve + factory

          本文链接:https://www.haomeiwen.com/subject/vauyhxtx.html