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将授予访问权限。下面给出的一个工作示例手动开始和结束加载，并通过其提供者设置加载微调器和加载条。

＆＃13;

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

＆＃13;

<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>

＆＃13;

如何针对各种等待条件明确使用Angular Loading Bar？

1 个答案: