Tutorial by Examples

After including oclazyload.js in your index file, declare ocLazyLoad as a dependency in app.js //Make sure you put the correct dependency! it is spelled different than the service! angular.module('app', [ 'oc.lazyLoad', 'ui-router' ])

In order to lazily load files inject the $ocLazyLoad service into a controller or another service .controller('someCtrl', function($ocLazyLoad) { $ocLazyLoad.load('path/to/file.js').then(...); }); Angular modules will be automatically loaded into angular. Other variation: $ocLazyLoad.load([...

UI-Router: .state('profile', { url: '/profile', controller: 'profileCtrl as vm' resolve: { module: function($ocLazyLoad) { return $ocLazyLoad.load([ 'path/to/profile/module.js', 'path/to/profile/style.css' ]); } } }); ngRoute: .when('/profile', { controlle...

The following syntax allows you to specify dependencies in your module.js instead of explicit specification when using the service //lazy_module.js angular.module('lazy', [ 'alreadyLoadedDependency1', 'alreadyLoadedDependency2', ... [ 'path/to/lazily/loaded/dependency.js', 'path/to/l...

<div oc-lazy-load="['path/to/lazy/loaded/directive.js', 'path/to/lazy/loaded/directive.html']"> <!-- myDirective available here --> <my-directive></my-directive> </div>