AngularJS加载进度条

Question

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

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

Answer 1

对于YouTube的进度条,您可以查看ngprogress.然后在您的应用程序配置之后(例如),您可以拦截路线的事件.

做一些像:

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