如何针对各种等待条件显式使用 Angular 加载栏？

Question

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

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

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

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

下面有很多服务、工厂和控制器的声明，形式如下：

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

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

Answer 1

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

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>

如何针对各种等待条件显式使用 Angular 加载栏？

How can I use the Angular Loading Bar explicitly for various wait conditions?

javascript

angularjs

angular-services