9

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

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

4

5 回答 5

21

对于 YouTube 的进度条，您可以查看ngprogress。然后在你的应用程序配置之后（例如），你可以拦截路由的事件。

并执行以下操作：

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

  $rootScope.$on('$routeChangeSuccess', function() {
    ngProgress.complete();
  });
  // Do the same with $routeChangeError
});
于 2013-11-05T00:43:29.370 回答
5

由于@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();
    });
});
于 2015-11-20T20:59:07.747 回答
1

如果是下一个需要时间加载的路由，例如在控制器运行之前进行 ajax 调用（解决路由上的配置），则使用 $route 服务的 $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>
于 2013-11-05T01:10:00.803 回答
1

使用角度加载杆

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

于 2015-10-08T14:58:33.603 回答
-1

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

请记住注入 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 计时分析此方法后，我观察到这不是添加加载栏的正确方法。当然，加载栏对访问者是可见的，但它不会与实际的页面加载时间同步。

于 2015-10-25T21:02:03.230 回答