Question

使用AngularJS并使用$location.path('/path')进行重定向时，新页面需要一段时间才能加载，尤其是在移动设备上。

有没有办法添加进度条进行加载？也许像YouTube这样的东西？

Answer 1

对于YouTube提供的进度条，您可以查看ngprogress。然后，在您的应用配置之后（例如），您可以intercept route's events。

做类似的事情：

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调用（解析路由上的config）然后使用$ route service的$ routeChangeStart，$ routeChangeSuccess和$ routeChangeError事件。

注册一个顶级控制器（在ng-view之外），监听这些事件并在$ scope中管理一个布尔变量。

将此变量与ng-show一起使用以覆盖“加载，请稍候”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>

Answer 4

使用angular-loading-bar

这里的独立演示.. https://github.com/danday74/angular-loading-bar-standalone-demo

Answer 5

这是我在我的应用程序中使用的工作解决方案。 ngProgress是用于在更改网址时显示加载条的最佳库。

请记住注入ngProgressFactory而不是ngProgress，而不是Luc的解决方案。

angular.module('appRoutes', []).run(function ($rootScope, ngProgressFactory) {
    $rootScope.$on("$routeChangeStart", function () {
        $rootScope.progressbar = ngProgressFactory.createInstance();
        $rootScope.progressbar.start();

    });

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

更新2015年11月 - 在使用chrome计时分析此方法后，我发现这不是添加加载栏的正确方法。当然，访问者可以看到加载栏，但它不会与实际的页面加载时间同步。

AngularJS加载进度条

5 个答案: