diff --git a/_guide/010. lazyloading.md b/_guide/010. lazyloading.md index 521e0f2104bc..89ec03ec8111 100644 --- a/_guide/010. lazyloading.md +++ b/_guide/010. lazyloading.md @@ -69,4 +69,51 @@ This may include: ## +## Load modules with ocLazyLoad and webpack +Create a config function and provide your state config there. + +### lazy.js +``` +export default angular + .module('lazyLoadedModule', ['ui.router']) + .component('lazy', { + restrict: 'E', + template: '
lazy loaded
', + }) +.name; +``` +### lazy.config.js +``` +export default function($stateProvider) { + 'ngInject'; + $stateProvider.state('lazy', { + component: 'lazyLoaded', + resolve: { + loadModule: function($q, $ocLazyLoad) { + 'ngInject'; + const d = $q.defer(); + require.ensure([], function() { + const waiting = require('./lazy'); + $ocLazyLoad.load({name: waiting.default}); + d.resolve(waiting.default); + }); + return d.promise; + }, + }, + }); +} +``` + +Simply add it to your angular app +### app.js +``` +import lazy_load_state from './lazy.config +angular + .module('app', [ + 'oc.lazyLoad', + 'ui.router' + ]) + .config(lazy_load_state) + .component('app', AppComponent); +```