Can't add loading bar (Angular)

Question

I have this problem:

I was trying to add a simple loading bar to my angular project, but somehow i can't get it to work.

I was trying to implement this one: http://chieffancypants.github.io/angular-loading-bar/

I have installed it with "npm install angular-loading-bar" with succes. And in my angular module, it is set as a dependency.

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

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

But somehow this makes my website crash, and with the developer tool opened, it get this error message:

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    

What am i doing wrong?

Answer 1

You need to make sure dependency library is loaded before Angular.

Try putting <script type='text/javascript' src='http://cdnjs.cloudflare.com/ajax/libs/angular-loading-bar/0.7.1/loading-bar.min.js'></script> in the very bottom of your index.html, before the </body> tag.

Good luck.

Answer 2

1. Install it via bower $ bower install angular-loading-bar

2. Add following in 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>

3. Add 'angular-loading-bar' inside angular.module in app.js

4. Under angular.module add this

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

5. Call loading-bar-container ID in html view like this

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