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

时间：2012-08-15 15:12:59

标签： javascript angularjs angularjs-routing

我想知道是否有一种方法（类似于Gmail）AngularJS 延迟显示新路由，直到每个模型及其数据被提取后使用其各自的服务。

例如，如果列出了所有项目的ProjectsController和显示这些项目的模板的project_index.html，则在显示新页面之前将完全获取Project.query()。< / p>

在此之前，旧页面仍将继续显示（例如，如果我正在浏览另一个页面，然后决定查看此项目索引）。

13 个答案:

答案 0 :(得分：374)

$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属性是在路线上定义的。

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属性中定义。

resolve.phones函数负责返回一个promise。所有承诺都被收集起来，路线变更被推迟到所有承诺得到解决之后。

工作演示：http://mhevery.github.com/angular-phonecat/app/#/phones 资料来源：https://github.com/mhevery/angular-phonecat/commit/ba33d3ec2d01b70eb5d3d531619bf90153496831

答案 1 :(得分：51)

这是一个适用于Angular 1.0.2的最小工作示例

模板：

<script type="text/ng-template" id="/editor-tpl.html">
    Editor Template {{datasets}}
</script>

<div ng-view>

</div>

JavaScript的：

function MyCtrl($scope, datasets) {    
    $scope.datasets = datasets;
}

MyCtrl.resolve = {
    datasets : function($q, $http) {
        var deferred = $q.defer();

        $http({method: 'GET', url: '/someUrl'})
            .success(function(data) {
                deferred.resolve(data)
            })
            .error(function(data){
                //actually you'd want deffered.reject(data) here
                //but to show what would happen on success..
                deferred.resolve("error value");
            });

        return deferred.promise;
    }
};

var myApp = angular.module('myApp', [], function($routeProvider) {
    $routeProvider.when('/', {
        templateUrl: '/editor-tpl.html',
        controller: MyCtrl,
        resolve: MyCtrl.resolve
    });
});​
​

http://jsfiddle.net/dTJ9N/3/

简化版本：

由于$ http（）已经返回一个promise（也称为deferred），我们实际上不需要创建自己的。所以我们可以简化MyCtrl。决心：

MyCtrl.resolve = {
    datasets : function($http) {
        return $http({
            method: 'GET', 
            url: 'http://fiddle.jshell.net/'
        });
    }
};

$ http（）的结果包含数据，状态，标题和 config 对象，所以我们需要将MyCtrl的主体更改为：

$scope.datasets = datasets.data;

http://jsfiddle.net/dTJ9N/5/

答案 2 :(得分：32)

我看到有些人在使用带有缩小友好依赖注入的angular.controller方法时询问如何执行此操作。由于我刚开始工作，我觉得有必要回来帮忙。这是我的解决方案（从原始问题和Misko的答案中采用）：

angular.module('phonecat', ['phonecatFilters', 'phonecatServices', 'phonecatDirectives']).
  config(['$routeProvider', function($routeProvider) {
    $routeProvider.
      when('/phones', {
        templateUrl: 'partials/phone-list.html', 
        controller: PhoneListCtrl, 
        resolve: { 
            phones: ["Phone", "$q", function(Phone, $q) {
                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: ["$q","$defer", function($q, $defer) {
               var delay = $q.defer();
               $defer(delay.resolve, 1000);
               return delay.promise;
              }
            ]
        },

        }).
      when('/phones/:phoneId', {
        templateUrl: 'partials/phone-detail.html', 
        controller: PhoneDetailCtrl, 
        resolve: PhoneDetailCtrl.resolve}).
      otherwise({redirectTo: '/phones'});
}]);

angular.controller("PhoneListCtrl", [ "$scope", "phones", ($scope, phones) {
  $scope.phones = phones;
  $scope.orderProp = 'age';
}]);

由于此代码源自问题/最受欢迎的答案，因此未经测试，但如果您已经了解如何制作缩小友好的角度代码，它应该向您发送正确的方向。我自己的代码不需要的那一部分是在“手机”的解析功能中注入“电话”，我也没有使用任何“延迟”对象。

我也推荐这个YouTube视频http://www.youtube.com/watch?v=P6KITGRQujQ&list=UUKW92i7iQFuNILqQOUOCrFw&index=4&feature=plcp，这对我有很大帮助

如果您感兴趣我还决定粘贴我自己的代码（写在coffeescript中），这样你就可以看到我是如何运作的。

仅供参考，我提前使用通用控制器帮助我在几种型号上进行CRUD：

appModule.config ['$routeProvider', ($routeProvider) ->
  genericControllers = ["boards","teachers","classrooms","students"]
  for controllerName in genericControllers
    $routeProvider
      .when "/#{controllerName}/",
        action: 'confirmLogin'
        controller: 'GenericController'
        controllerName: controllerName
        templateUrl: "/static/templates/#{controllerName}.html"
        resolve:
          items : ["$q", "$route", "$http", ($q, $route, $http) ->
             deferred = $q.defer()
             controllerName = $route.current.controllerName
             $http(
               method: "GET"
               url: "/api/#{controllerName}/"
             )
             .success (response) ->
               deferred.resolve(response.payload)
             .error (response) ->
               deferred.reject(response.message)

             return deferred.promise
          ]

  $routeProvider
    .otherwise
      redirectTo: '/'
      action: 'checkStatus'
]

appModule.controller "GenericController", ["$scope", "$route", "$http", "$cookies", "items", ($scope, $route, $http, $cookies, items) ->

  $scope.items = items
      #etc ....
    ]

答案 3 :(得分：18)

This commit是版本1.1.5及更高版本的一部分，它公开了$promise的{​​{1}}对象。包含此提交的ngResource版本允许解析如下资源：

<强> $ routeProvider 

$resource

<强>控制器 

resolve: {
    data: function(Resource) {
        return Resource.get().$promise;
    }
}

答案 4 :(得分：16)

此代码段依赖注入友好（我甚至将它与 ngmin 和 uglify 结合使用）并且它更优雅基于域驱动的解决方案。

以下示例注册电话 资源和常量 phoneRoutes ，其中包含您的所有路由信息那个（电话）域名。我在提供的答案中不喜欢的是 resolve 逻辑的位置 - 主模块不应该知道任何内容或对资源参数提供给控制器的方式感到困扰。这样逻辑就会停留在同一个域中。

注意：如果您正在使用ngmin（如果您不是：您应该这样做），您只需要使用DI数组约定编写解析函数。 

angular.module('myApp').factory('Phone',function ($resource) {
  return $resource('/api/phone/:id', {id: '@id'});
}).constant('phoneRoutes', {
    '/phone': {
      templateUrl: 'app/phone/index.tmpl.html',
      controller: 'PhoneIndexController'
    },
    '/phone/create': {
      templateUrl: 'app/phone/edit.tmpl.html',
      controller: 'PhoneEditController',
      resolve: {
        phone: ['$route', 'Phone', function ($route, Phone) {
          return new Phone();
        }]
      }
    },
    '/phone/edit/:id': {
      templateUrl: 'app/phone/edit.tmpl.html',
      controller: 'PhoneEditController',
      resolve: {
        form: ['$route', 'Phone', function ($route, Phone) {
          return Phone.get({ id: $route.current.params.id }).$promise;
        }]
      }
    }
  });

下一部分是在模块处于配置状态时注入路由数据并将其应用于 $ routeProvider 。

angular.module('myApp').config(function ($routeProvider, 
                                         phoneRoutes, 
                                         /* ... otherRoutes ... */) {

  $routeProvider.when('/', { templateUrl: 'app/main/index.tmpl.html' });

  // Loop through all paths provided by the injected route data.

  angular.forEach(phoneRoutes, function(routeData, path) {
    $routeProvider.when(path, routeData);
  });

  $routeProvider.otherwise({ redirectTo: '/' });

});

使用此设置测试路线配置也非常简单：

describe('phoneRoutes', function() {

  it('should match route configuration', function() {

    module('myApp');

    // Mock the Phone resource
    function PhoneMock() {}
    PhoneMock.get = function() { return {}; };

    module(function($provide) {
      $provide.value('Phone', FormMock);
    });

    inject(function($route, $location, $rootScope, phoneRoutes) {
      angular.forEach(phoneRoutes, function (routeData, path) {

        $location.path(path);
        $rootScope.$digest();

        expect($route.current.templateUrl).toBe(routeData.templateUrl);
        expect($route.current.controller).toBe(routeData.controller);
      });
    });
  });
});

你可以在my latest (upcoming) experiment中看到它的全部荣耀。 虽然这种方法对我来说很好，但我真的很想知道为什么$ injector注入器在检测到任何的注入时推迟 的构建承诺对象;它会让事情变得更容易。

编辑：使用Angular v1.2（rc2）

答案 5 :(得分：11)

延迟显示路线肯定会导致异步纠结...为什么不简单地跟踪主实体的加载状态并在视图中使用它。例如，在您的控制器中，您可以同时使用ngResource上的成功和错误回调：

$scope.httpStatus = 0; // in progress
$scope.projects = $resource.query('/projects', function() {
    $scope.httpStatus = 200;
  }, function(response) {
    $scope.httpStatus = response.status;
  });

然后在视图中你可以做任何事情：

<div ng-show="httpStatus == 0">
    Loading
</div>
<div ng-show="httpStatus == 200">
    Real stuff
    <div ng-repeat="project in projects">
         ...
    </div>
</div>
<div ng-show="httpStatus >= 400">
    Error, not found, etc. Could distinguish 4xx not found from 
    5xx server error even.
</div>

答案 6 :(得分：7)

我从上面的Misko代码开始工作，这就是我用它做的。这是一个更新的解决方案，因为$defer已更改为$timeout。但是，替换$timeout将等待超时期限（在Misko的代码中，1秒），然后返回希望及时解决的数据。通过这种方式，它会尽快返回。

function PhoneListCtrl($scope, phones) {
  $scope.phones = phones;
  $scope.orderProp = 'age';
}

PhoneListCtrl.resolve = {

  phones: function($q, Phone) {
    var deferred = $q.defer();

    Phone.query(function(phones) {
        deferred.resolve(phones);
    });

    return deferred.promise;
  }
}

答案 7 :(得分：7)

使用AngularJS 1.1.5

使用 AngularJS 1.1.5 语法在Justen的答案中更新'手机'功能。

原件：

phones: function($q, Phone) {
    var deferred = $q.defer();

    Phone.query(function(phones) {
        deferred.resolve(phones);
    });

    return deferred.promise;
}

更新：

phones: function(Phone) {
    return Phone.query().$promise;
}

非常感谢Angular团队和贡献者。 ：）

这也是Maximilian Hoffmann的答案。显然，提交已进入1.1.5。

答案 8 :(得分：5)

您可以使用$routeProvider resolve属性来延迟路由更改，直到加载数据。

angular.module('app', ['ngRoute']).
  config(['$routeProvider', function($routeProvider, EntitiesCtrlResolve, EntityCtrlResolve) {
    $routeProvider.
      when('/entities', {
        templateUrl: 'entities.html', 
        controller: 'EntitiesCtrl', 
        resolve: EntitiesCtrlResolve
      }).
      when('/entity/:entityId', {
        templateUrl: 'entity.html', 
        controller: 'EntityCtrl', 
        resolve: EntityCtrlResolve
      }).
      otherwise({redirectTo: '/entities'});
}]);

请注意，resolve属性是在路由上定义的。

EntitiesCtrlResolve和EntityCtrlResolve是与EntitiesCtrl和EntityCtrl控制器位于同一文件中的constant个对象。

// EntitiesCtrl.js

angular.module('app').constant('EntitiesCtrlResolve', {
  Entities: function(EntitiesService) {
    return EntitiesService.getAll();
  }
});

angular.module('app').controller('EntitiesCtrl', function(Entities) {
  $scope.entities = Entities;

  // some code..
});

// EntityCtrl.js

angular.module('app').constant('EntityCtrlResolve', {
  Entity: function($route, EntitiesService) {
    return EntitiesService.getById($route.current.params.projectId);
  }
});

angular.module('app').controller('EntityCtrl', function(Entity) {
  $scope.entity = Entity;

  // some code..
});

答案 9 :(得分：3)

我喜欢darkporter的想法，因为AngularJS的新手团队很容易理解并立即开始工作。

我创建了这个改编版，它使用2个div，一个用于加载程序栏，另一个用于加载数据后显示的实际内容。错误处理将在其他地方完成。

在$ scope中添加'ready'标志：

$http({method: 'GET', url: '...'}).
    success(function(data, status, headers, config) {
        $scope.dataForView = data;      
        $scope.ready = true;  // <-- set true after loaded
    })
});

在html视图中：

<div ng-show="!ready">

    <!-- Show loading graphic, e.g. Twitter Boostrap progress bar -->
    <div class="progress progress-striped active">
        <div class="bar" style="width: 100%;"></div>
    </div>

</div>

<div ng-show="ready">

    <!-- Real content goes here and will appear after loading -->

</div>

另请参阅：Boostrap progress bar docs

答案 10 :(得分：1)

我喜欢上面的答案并从他们那里学到了很多东西但是在上面的大多数答案中都缺少了一些东西。

我陷入了类似的情况，我正在使用从服务器发出的第一个请求中获取的一些数据来解析url。 我遇到的问题是承诺是rejected。

我使用的是自定义提供程序，该提供程序曾用于返回Promise，resolve在配置阶段由$routeProvider解析。

我想强调的是when它的概念是这样的。

它看到url栏中的url，然后在被调用的控制器和视图中看到相应的when块到目前为止是如此的好。

假设我有以下配置阶段代码。

App.when('/', {
   templateUrl: '/assets/campaigns/index.html',
   controller: 'CampaignListCtr',
   resolve : {
      Auth : function(){
         return AuthServiceProvider.auth('campaign');
      }
   }
})
// Default route
.otherwise({
   redirectTo: '/segments'
});

在浏览器的第一个根网址中，第一个运行调用块被调用，否则将调用otherwise。

让我们想象一下我在地址栏AuthServicePrivider.auth()函数中命中rootUrl的场景。

让我们说Promise返回的是拒绝状态 那么???

根本没有渲染任何东西。

Otherwise块将不会被执行，因为它是任何未在配置块中定义并且angularJs配置阶段未知的URL。

我们必须处理在未解决此承诺时被触发的事件。失败$routeChangeErorr会在$rootScope上被触发。

可以如下面的代码所示捕获它。

$rootScope.$on('$routeChangeError', function(event, current, previous, rejection){
    // Use params in redirection logic.
    // event is the routeChangeEvent
    // current is the current url
    // previous is the previous url
    $location.path($rootScope.rootPath);
});

IMO将事件跟踪代码放在应用程序的运行块中通常是一个好主意。此代码在应用程序的配置阶段之后运行。

App.run(['$routeParams', '$rootScope', '$location', function($routeParams, $rootScope, $location){
   $rootScope.rootPath = "my custom path";
   // Event to listen to all the routeChangeErrors raised
   // by the resolve in config part of application
   $rootScope.$on('$routeChangeError', function(event, current, previous, rejection){
       // I am redirecting to rootPath I have set above.
       $location.path($rootScope.rootPath);
   });
}]);

这样我们就可以在配置阶段处理承诺失败。

答案 11 :(得分：0)

我有一个复杂的多级滑动面板界面，带有禁用的屏幕层。在禁用屏幕图层上创建指令，该指令将创建单击事件以执行状态，如

$state.go('account.stream.social.view');

正在产生轻弹效果。 history.back（）而不是它工作正常，但在我的情况下它并不总是回到历史。所以我发现如果我只是在我的禁用屏幕而不是state.go上创建属性href，就像一个魅力。 

<a class="disable-screen" back></a>

指令'回'

app.directive('back', [ '$rootScope', function($rootScope) {

    return {
        restrict : 'A',
        link : function(scope, element, attrs) {
            element.attr('href', $rootScope.previousState.replace(/\./gi, '/'));
        }
    };

} ]);

app.js我只保存以前的状态

app.run(function($rootScope, $state) {      

    $rootScope.$on("$stateChangeStart", function(event, toState, toParams, fromState, fromParams) {         

        $rootScope.previousState = fromState.name;
        $rootScope.currentState = toState.name;


    });
});

答案 12 :(得分：-2)

一种可能的解决方案可能是使用ng-cloak指令和我们使用模型的元素，例如

<div ng-cloak="">
  Value in  myModel is: {{myModel}}
</div>

我认为这个需要付出最少的努力。

相关问题
最新问题