AngularJS路线和Ajax数据的路由变化

我有一个路由器配置，一旦路线发生改变，而templateUrl提供我想进行Ajax调用来获取一些JSON数据。

注意，我不想等待，以获取模板，比使用控制器来获取JSON数据，因为这是两个串行HTTP调用。我想通过获取模板并行获取JSON数据。有没有一个众所周知的模式来做到这一点？

纠正我，如果我错了......现在，我明白，我应该使用中，我更愿意称之为“数据提供者”，这将触发一个HTTP调用来获取JSON数据的解析。这些数据将会提供给控制器。因此，像这样......

app.config(['$routeProvider', 'data', function(routeProvider, dataProvider) { 

    routeProvider. 
     when('/reports/:reportName', { 
      templateUrl: function(urlData) { 
       return "/some/url/" + urlData.reportName + "/content"; 
      }, 
      resolve: { 
       reportData: function() { 
        return dataProvider.getData(); 
       } 
      }, 
      controller: 'reportRoutingCtrl' 
     }); 
}]); 
app.controller('reportRoutingCtrl', ['$scope', 'reportData', 'reportName', function(scope, reportData) { 
    console.dir(reportData); 
}]);

这是正确的模式可循？如果是这样，我怎样才能访问解析器中的'urlData'对象？

谢谢你的帮助！

来源

2014-09-23 Assaf Moldavsky

是啊，这很好...'$ routeParams'让你'urlData' – calebboyd 2014-09-23 04:11:22

这是我会怎么做（和我认为这是做的最接受的方式）。

试想，你在渲染视图，用户可以直观地了解一个具体的项目，你必须从服务器项目获取数据。

我想有一个service像这样的：

services.factory('ItemLoader', ['Item', '$route', '$q', 
    function(Item, $route, $q) { 
    return function() { 
    var delay = $q.defer(); 
    Item.get({id: $route.current.params.itemId}, function(item) { 
     delay.resolve(item); 
    }, function() { 
     delay.reject('Unable to fetch the item' + $route.current.params.itemId); 
    }); 
    return delay.promise; 
    }; 
}]);

我routeProvider应该是这样的：

.when('/view/:itemId', { 
    controller: 'ViewCtrl', 
    resolve: { 
     item: ["ItemLoader", function(ItemLoader) { 
     return ItemLoader(); 
     }] 
    }, 
    templateUrl:'/views/viewItem.html' 
    })

和控制器的签名会是这样：

app.controller('ViewCtrl', ['$scope', '$location', 'item', 
function($scope, $location, item) { 
    ... 
}]);

请注意，解决方案将注入提取的item进入控制器。

来源

2014-09-23 04:01:17 Josep

谢谢您的答复，我缺少的事实，你可以注入的依赖到的决心功能。我最初的挫折是因为除了提供者之外，我无法将任何东西注入配置函数。而提取数据的提供者有点太多了。我也很喜欢你的工厂如何返回一个新的承诺，而不是注入控制器。非常感谢您撰写本文并为我解决问题！ – 2014-09-23 04:20:03

@AssafMoldavsky没问题！任何时候！ ;） – Josep 2014-09-23 04:21:12

总结什么是被何塞普提供，并把它变成一个最终的解决方案，在这里如果任何人想知道的相同的代码...

services.factory('dataProviderService', ['$route', '$q', '$http', function($route, $q, $http) { 

    return function() { 
     getReportData: function(reportName) { 
      var delay = $q.defer(); 

      $http({method: 'GET', url: "someURL", params: { 
       fileId: "11159", 
       reportName: "someName" 
      }}).success(function(data, status, headers, config) { 

       // this callback will be called asynchronously 
       // when the response is available 
       delay.resolve(data); 

      }).error(function(data, status, headers, config) { 

       // called asynchronously if an error occurs 
       // or server returns response with an error status. 
       delay.reject(data); 

      }); 

      return delay.promise; 
     } 
    }; 
}]); 
app.config(['$routeProvider', 'data', function(routeProvider, dataProvider) { 

    routeProvider. 
     when('/reports/:reportName', { 
      templateUrl: function(urlData) { 
       return "/some/url/" + urlData.reportName + "/content"; 
      }, 
     resolve: { 
      reportName: ['$route', function(route) { 
       return route.current.params.reportName; 
      }], 
      reportData: ['reportService', '$route', function(reportService, $route) { 
       var reportName = $route.current.params.reportName; 
       return reportService.getReportData(reportName); 
      }] 
     }, 
      controller: 'reportRoutingCtrl' 
    }); 
}]); 
app.controller('reportRoutingCtrl', ['$scope', 'reportData', 'reportName', function(scope, reportData) { 

    console.log(reportName); 
    console.log(reportData); 

}]);

再次，你何塞普！

来源

2014-09-23 05:03:33

AngularJS路线和Ajax数据的路由变化

回答

相关问题