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()
});
}
]);
var mails = $http.get(path).then(function(resp) { $scope.complete() return resp; });
show complete should be call before returning data