Question

我有这个问题：

我试图在我的角度项目中添加一个简单的加载栏，但不知怎的，我无法让它工作。

我试图实现这个：http://chieffancypants.github.io/angular-loading-bar/

我已经安装了＆＃34; npm install angular-loading-bar＆＃34;有成功。在我的角度模块中，它被设置为依赖。

angular.module('myAppRename.view5', ['ngRoute', 'angular-loading-bar'])

.config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/view5', {
        templateUrl: 'app/view5/view5.html',
        controller: 'View5Ctrl'
    });
}])

但不知何故，这会让我的网站崩溃，并且打开开发人员工具后会收到以下错误消息：

Error: [$injector:modulerr] Failed to instantiate module myAppRename due to:    
[$injector:modulerr] Failed to instantiate module myAppRename.view5 due to:
[$injector:modulerr] Failed to instantiate module angular-loading-bar due to:
[$injector:nomod] Module 'angular-loading-bar' is not available! You either misspelled     the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.2.27/$injector/nomod?p0=angular-loading-bar

我做错了什么？

Answer 1

您需要确保在Angular之前加载依赖库。

尝试推杆 <script type='text/javascript' src='http://cdnjs.cloudflare.com/ajax/libs/angular-loading-bar/0.7.1/loading-bar.min.js'></script>位于index.html标记最下方的</body>。

祝你好运。

Answer 2

通过 bower $ bower install angular-loading-bar
在index.html中添加以下内容

<link rel='stylesheet' href="libs/angular-loading-bar/src/loading-bar.css" type='text/css' media='all' /> <script type='text/javascript' src='libs/angular-loading-bar/src/loading-bar.js'></script>
在app.js中的'angular-loading-bar'内添加angular.module
在angular.module下添加此

.config(['cfpLoadingBarProvider', function(cfpLoadingBarProvider) { cfpLoadingBarProvider.parentSelector = '#loading-bar-container'; cfpLoadingBarProvider.spinnerTemplate = '<div><span class="fa fa-spinner"> Loading data...</div>'; }])
在html视图中调用loading-bar-container ID，如下所示

<div id="loading-bar-container">

无法添加加载栏（Angular）

2 个答案: