延迟AngularJS路线改变，直到模型加载到prevent闪烁 [英] 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.

首先定义与路由解析属性是这样的。

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'});
}]);

注意：决心属性路线定义。

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;
  }
}

注意控制定义包含其中声明的东西应该是提供给控制器构造下决心对象。在这里，电话注入控制器，它是在定义的解析属性。

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 函数负责返回一个承诺。所有承诺的收集和路由变化延迟到之后的所有承诺都解决了。

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.

工作演示：<一href=\"http://mhevery.github.com/angular-phonecat/app/#/phones\">http://mhevery.github.com/angular-phonecat/app/#/phones
来源：<一个href=\"https://github.com/mhevery/angular-phonecat/commit/ba33d3ec2d01b70eb5d3d531619bf90153496831\">https://github.com/mhevery/angular-phonecat/commit/ba33d3ec2d01b70eb5d3d531619bf90153496831

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