AngularJS加载进度条

Question

当使用AngularJS和使用$location.path('/path')进行重定向时，加载新页面需要一段时间，特别是在移动平台上。

是否有一种方法来添加一个进度条来加载？也许像YouTube这样的东西？

Answer 1

对于像YouTube一样的进度条，您可以查看恩格进展。然后，在您的应用程序配置之后(例如)，您可以使用拦截路线事件。

做这样的事情：

app.run(function($rootScope, ngProgress) {
  $rootScope.$on('$routeChangeStart', function() {
    ngProgress.start();
  });

  $rootScope.$on('$routeChangeSuccess', function() {
    ngProgress.complete();
  });
  // Do the same with $routeChangeError
});

Answer 2

由于@Luc的anwser ngProgress稍有改变，现在只能注入ngProgressFactory，所以必须使用它来创建ngProgress实例。此外，与@Ketan Patil的回答相反，您应该只实例化ngProgress 一次

angular.module('appRoutes', ['ngProgress']).run(function ($rootScope, ngProgressFactory) { 

    // first create instance when app starts
    $rootScope.progressbar = ngProgressFactory.createInstance();

    $rootScope.$on("$routeChangeStart", function () {
        $rootScope.progressbar.start();
    });

    $rootScope.$on("$routeChangeSuccess", function () {
        $rootScope.progressbar.complete();
    });
});

Answer 3

如果是下一个需要时间加载的路由，例如在控制器运行之前进行ajax调用(在路由上解析配置)，那么使用$route服务的$routeChangeStart、$routeChangeSuccess和$routeChangeError事件。

注册顶级控制器(ng-视图外)，该控制器侦听这些事件，并在其$scope中管理布尔变量。

使用这个变量与ng显示重叠一个“加载，请等待”div。

如果下一个路由加载得很快(即它的控制器运行得很快)，但是控制器请求的数据需要很长时间才能加载，那么恐怕您必须管理控制器和视图中旋转器的可见性状态。

类似于：

$scope.data = null;
$http.get("/whatever").success(function(data) {
    $scope.data = data;
});

<div ng-show="data !== null">...</div>
<div ng-show="data === null" class="spinner"></div>