延迟 AngularJS 路由更改直到模型加载以防止闪烁 [英] Delaying AngularJS route change until model loaded to prevent flicker

问题描述

我想知道 AngularJS 是否有一种方法(类似于 Gmail)可以延迟显示新路由，直到使用其各自的服务获取每个模型及其数据之后.

I am wondering if there is a way (similar to Gmail) for AngularJS to delay showing a new route until after each model and its data has been fetched using its respective services.

例如，如果有一个 ProjectsController 列出所有项目和 project_index.html 这是显示这些项目的模板，Project.query() 将在显示新页面之前完全获取.

For example, if there were a ProjectsController that listed all Projects and project_index.html which was the template that showed these Projects, Project.query() would be fetched completely before showing the new page.

在那之前，旧页面仍会继续显示(例如，如果我正在浏览另一个页面，然后决定查看此项目索引).

Until then, the old page would still continue to show (for example, if I were browsing another page and then decided to see this Project index).

推荐答案

$routeProvider resolve 属性允许在加载数据之前延迟路由更改.

$routeProvider resolve property allows delaying of route change until data is loaded.

首先用这样的resolve属性定义一个路由.

First define a route with resolve attribute like this.

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 属性是在路由上定义的.

notice that the resolve property is defined on 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;
  }
}

请注意，控制器定义包含一个解析对象，该对象声明了控制器构造函数应该可用的内容.这里 phones 被注入到控制器中，并在 resolve 属性中定义.

Notice that the controller definition contains a resolve object which declares things which should be available to the controller constructor. Here the phones is injected into the controller and it is defined in the resolve property.

resolve.phones 函数负责返回一个 promise.收集所有 Promise 并延迟路由更改，直到所有 Promise 都得到解决.

The resolve.phones function is responsible for returning a promise. All of the promises are collected and the route change is delayed until after all of the promises are resolved.

工作演示:http://mhevery.github.com/angular-phonecat/app/#/phones资料来源:https://github.com/mhevery/angular-phonecat/commit/ba30103040000000000000000000001bf903030100000c203030303030303030303030303030303030303030303030303030303030303030303030303030303030303030303030303015303030303030303030303030303030303031831一个>

Working demo: http://mhevery.github.com/angular-phonecat/app/#/phones Source: https://github.com/mhevery/angular-phonecat/commit/ba33d3ec2d01b70eb5d3d531619bf90153496831

这篇关于延迟 AngularJS 路由更改直到模型加载以防止闪烁的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！