我想知道是否有一种方式(类似于Gmail)AngularJS延迟显示一个新的路由，直到每个模型及其数据已使用其各自的服务提取之后。
例如，如果有一个ProjectsController列出了所有的项目，并且project_index.html是显示这些项目的模板，则在显示新页面之前，将会完全取出Project.query()。
$routeProvider
resolve属性允许延迟路由更改，直到加载数据。
首先定义一个具有像这样的resolve属性的路由。
angular.module('phonecat',['phonecatFilters','phonecatServices','phonecatDirectives']).
config(['$routeProvider',function($routeProvider) {
$routeProvider.
when('/phones',{
templateUrl: 'partials/phone-list.html',controller: PhoneListCtrl,resolve: PhoneListCtrl.resolve}).
when('/phones/:phoneId',{
templateUrl: 'partials/phone-detail.html',controller: PhoneDetailCtrl,resolve: PhoneDetailCtrl.resolve}).
otherwise({redirectTo: '/phones'});
}]);
注意resolve属性是在route上定义的。
function PhoneListCtrl($scope,phones) {
$scope.phones = phones;
$scope.orderProp = 'age';
}
PhoneListCtrl.resolve = {
phones: function(Phone,$q) {
// see: https://groups.google.com/forum/?fromgroups=#!topic/angular/DGf7yyD4Oc4
var deferred = $q.defer();
Phone.query(function(successData) {
deferred.resolve(successData);
},function(errorData) {
deferred.reject(); // you could optionally pass error data here
});
return deferred.promise;
},delay: function($q,$defer) {
var delay = $q.defer();
$defer(delay.resolve,1000);
return delay.promise;
}
}
注意，控制器定义包含一个resolve对象，它声明了控制器构造函数应该可用的东西。这里电话被注入到控制器中，并在resolve属性中定义。
resolve.phones函数负责返回一个promise。所有的promise被收集，并且路由改变被延迟，直到所有promise被解决之后。
工作演示：http://mhevery.github.com/angular-phonecat/app/#/phones
资料来源：https://github.com/mhevery/angular-phonecat/commit/ba33d3ec2d01b70eb5d3d531619bf90153496831