无法添加加载栏(角度）

Can't add loading bar (Angular)

本文关键字：角度 加载 添加      更新时间：2023-09-26

我有这个问题：

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

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

我已经用"npm 安装角度加载杆"成功安装了它。在我的角度模块中，它被设置为依赖项。

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

我做错了什么？

你需要确保在 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>标签之前。

祝你好运。

  1. 通过 bower $ bower install angular-loading-bar 安装它

  2. 在索引中添加以下内容.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>

    3. 在

  3. 应用程序的angular.module内添加'angular-loading-bar'.js

  4. 在angular.module下添加此内容

    .config(['cfpLoadingBarProvider', function(cfpLoadingBarProvider) { cfpLoadingBarProvider.parentSelector = '#loading-bar-container'; cfpLoadingBarProvider.spinnerTemplate = '<div><span class="fa fa-spinner"> Loading data...</div>'; }])

  5. 像这样在 html 视图中调用loading-bar-container ID

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

相关文章：