Module for lazy loading in angular. Makes it possible to lazy load angular elements (controllers, decorators, services, filters etc).
The project is build with support for the following modules: ui.router
, ngRoute
and ui.bootstrap
.
This loader is inspired by https://github.com/urish/angular-load.
http://jstroem.github.io/lazy.loader/demo
via npm
:
npm install angular-lazy.loader
via bower
:
bower install angular-lazy.loader
Before you can use any of the lazy-loading methods listed below you need to initialize lazy.loader
to the angular module you want to be able to add elements to lazily.
angular.module('moduleName', [..., 'lazy.loader']);
angular.module('lazy.loader').lazy.init('moduleName');
NOTE: You need to call the lazy.init
before any other methods are used on the module.
The .lazy.init
method returns the moduleName
module itself so you can chain your element registrations afterwards:
angular.module('moduleName', [..., 'lazy.loader']);
angular.module('lazy.loader').lazy.init('moduleName')
.controller('controlelrName', function() {
...
})
.config(function() {
...
});
When you define your routes you can now add controllerUrl
which will be loaded before the route is loaded:
$routeProvider.when('/', {
templateUrl: 'test.html',
controllerUrl: 'controllers/Test.js',
controller: 'Test',
controllerAs: 'vm'
});
When you define your states you can now add controllerUrl
which will be loaded before the state is loaded:
$stateProvider.state('test', {
url: '/test',
templateUrl: 'test.html',
controllerUrl: 'controllers/Test.js',
controller: 'Test',
controllerAs: 'vm'
});
This also works with multiple views:
$stateProvider.state('test', {
url: '/test',
views: {
header: {
templateUrl: 'header.html',
controllerUrl: 'controllers/header.js',
controller: 'Header',
controllerAs: 'vm'
},
footer: {
templateUrl: 'footer.html',
controllerUrl: 'controllers/footer.js',
controller: 'footer',
controllerAs: 'vm'
},
}
});
When you define your modal options you can now add controllerUrl
which will be loaded before the modal is loaded:
$uibModal.modal({
templateUrl: 'testModal.html',
controllerUrl: 'controllers/TestModal.js',
controller: 'TestModal',
controllerAs: 'vm'
});
You can also load your own custom javascript files by using the lazyLoaderService.load
method. The method returns a promise which tells if the file was loaded correctly.
['$lazyLoaderService', function(lazyLoader) {
lazyLoader.load('https://some.url/javascript.js').then(function(){
console.log("success");
}, function(){
console.log("error");
});
}]
npm test
Contributions are welcome!