javascript - 如何针对各种等待条件显式使用 Angular Loading Bar？

Question

我正在开发的应用程序通过 Ajax 加载 HTML 模板来完成大部分导航。 Angular Loading Bar 对此非常有用，因为它使用拦截器来监视大多数 $http 请求。但是，它确实有 start() 和 complete() 方法，它们按我的要求工作，独立于任何 $http< 启动和停止负载指示器 请求。

我的问题是我无法弄清楚如何直接或通过将其注入(inject)控件来访问此服务，以访问我想要的这两种方法。与此服务有关的唯一证据只能在 Angular 应用程序的前两行中找到:

var MlamAngularApp = angular.module('MlamAngularApp', ['kendo.directives', 'ngRoute', 'angular-loading-bar', 'ngAnimate']);

MlamAngularApp.config(['cfpLoadingBarProvider', function (cfpLoadingBarProvider) {
    cfpLoadingBarProvider.includeSpinner = true;
    cfpLoadingBarProvider.includeBar = true;
}]);

后面有很多服务、工厂和 Controller 的声明，形式如下:

MlamAngularApp.service('QuoteService', QuoteService);
MlamAngularApp.factory('ApplicationCancelFactory', ApplicationCancelFactory);
MlamAngularApp.controller('MlamController', MlamController);

而且我以某种方式怀疑加载栏应该包含在某处，但真的不知道它是否应该或如何。

Answer 1

你的猜测是正确的。将 cfpLoadingBar 注入(inject) Controller 将授予访问权限。下面给出的工作示例手动开始和结束加载，以及通过其提供程序设置加载微调器和加载栏。

var app = angular.module('app', ['angular-loading-bar']);
app.config(['cfpLoadingBarProvider', function(cfpLoadingBarProvider) {
    cfpLoadingBarProvider.includeSpinner = true; // Show the spinner.
    cfpLoadingBarProvider.includeBar = true; // Show the bar.
}]);
app.controller('appCtrl', ['cfpLoadingBar', function(cfpLoadingBar) {
    cfpLoadingBar.start(); // Start loading.
    setTimeout( function() {
        cfpLoadingBar.complete(); // End loading.
    }, 1000);
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/angular-loading-bar/0.7.1/loading-bar.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-loading-bar/0.7.1/loading-bar.min.js"></script>

<div ng-app="app" ng-controller="appCtrl"></div>