延迟AngularJS路由更改,直到模型加载,以防止闪烁

我想知道是否有一种方式(类似于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