0

Problem : I am not able to load the angular-loading-bar using lazy load and ui.route.

Am I missing something ?

This is how my config.lazlyload.js file looks like :

// lazyload config

angular.module('app')

// oclazyload config
.config(['$ocLazyLoadProvider',
    function($ocLazyLoadProvider) {
        // We configure ocLazyLoad to use the lib script.js as the async loader
        $ocLazyLoadProvider.config({
            debug: false,
            events: true,
            modules: [{
                name: 'ngGrid',
                files: [
                    'vendor/modules/ng-grid/ng-grid.min.js',
                    'vendor/modules/ng-grid/ng-grid.min.css',
                    'vendor/modules/ng-grid/theme.css'
                ]
            }, {
                name: 'angular-loading-bar',
                files: [
                    'vendor/modules/angular-loading-bar/loading-bar.min.js',
                    'vendor/modules/angular-loading-bar/loading-bar.min.css'
                ]
            }]
        });
    }
]);

This is my config.router.js :

'use strict';

/**
 * Config for the router
 */
angular.module('app')
    .run(
        ['$rootScope', '$state', '$stateParams',
            function($rootScope, $state, $stateParams) {
                $rootScope.$state = $state;
                $rootScope.$stateParams = $stateParams;
            }
        ]
)
    .config(
        ['$stateProvider', '$urlRouterProvider',
            function($stateProvider, $urlRouterProvider) {
                $urlRouterProvider
                    .otherwise('/access/signin');
                $stateProvider
                    .state('access.test', {
                        url: '/test/me',
                        templateUrl: 'tpl/test.html',
                        controller: 'testController',
                        resolve: {
                            deps: ['$ocLazyLoad',
                                function($ocLazyLoad) {
                                    return $ocLazyLoad.load('ui.select', 'angular-loading-bar').then(
                                        function() {
                                            return $ocLazyLoad.load('js/controllers/test.js');
                                        }
                                    );
                                }
                            ]
                        }
                    })
            }
        ]
);

My controller is :

'use strict';

/* Controllers */

app.controller('testController', ['$scope', '$http', '$state', '$stateParams',
    function($scope, $http, $state, $stateParams) {

        //assuming this should start the loader
        $scope.start();

        var path = 'js/app/largeJson.json';
        var mails = $http.get(path).then(function(resp) {
            return resp;
            //this shall end the loader
            $scope.complete()
        });

    }
]);

1
  • you mails function should be var mails = $http.get(path).then(function(resp) { $scope.complete() return resp; }); show complete should be call before returning data Mar 7, 2015 at 19:43

1 Answer 1

1

You complete function will never get called because you returned a data then you wrote $scope.complete(), you should write that $scope.complete() function before returning data.

CODE

app.controller('testController', ['$scope', '$http', '$state', '$stateParams',
    function($scope, $http, $state, $stateParams) {

        //assuming this should start the loader
        $scope.start();

        var path = 'js/app/largeJson.json';
        var mails = $http.get(path).then(function(resp) {
            //this shall end the loader
            $scope.complete();
            return resp;
        });

    }
]);

Update

if you wish to use the loading bar without the interceptor, you can do that as well. Simply include the loading bar service as a dependency instead of the main angular-loading-bar module:

angular.module('myApp', ['cfp.loadingBar'])

Then your controller will have the start & complete methods which will internally call cfpLoadingBar methods

Controller

app.controller('testController', ['$scope', '$http', '$state', '$stateParams', cfpLoadingBar,
    function($scope, $http, $state, $stateParams, cfpLoadingBar) {

        $scope.start = function() {
          cfpLoadingBar.start();
        };

        $scope.complete = function () {
          cfpLoadingBar.complete();
        };
        //assuming this should start the loader
        $scope.start();

        var path = 'js/app/largeJson.json';
        var mails = $http.get(path).then(function(resp) {
            //this shall end the loader
            $scope.complete();
            return resp;
        });

    }
]);

For more info take a look at Github page

Hope this could help you, Thanks.

6
  • thanks for the reply. but that's not the real problem. The problem is I am getting undefined error for $scope.start(). How do i tell angular js that i have already declared ngProgress in ocLazyLoad config and also I have specified its name in config.router ? Mar 8, 2015 at 4:42
  • could you please tell what erroe you are getting in console? Mar 8, 2015 at 5:37
  • It says : Cannot read property 'start' of undefined at $scope.start() Mar 8, 2015 at 5:52
  • @user3825003 where start & complete methods are defined? Mar 8, 2015 at 6:51
  • They are actually inside angular-loading-bar.js. I have specified the path in config itself. So it should be able to find it out. Mar 9, 2015 at 13:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.