Service

Table of contents:

• Load method
• Use config options
• List of parameters
• Additional methods

Load method:

You can include $ocLazyLoad and use the function load which returns a promise. It supports a single dependency or multiple dependencies (array).

Load one or more modules & components with one file:

JavaScript

$ocLazyLoad.load('testModule.js');

Load one or more modules & components with multiple files:

JavaScript

$ocLazyLoad.load(['testModule.js', 'testModuleCtrl.js', 'testModuleService.js']);

Load one or more modules with multiple files and specify a type where necessary:
Note: When using the requireJS style formatting (with js! at the beginning for example), do not specify a file extension. Use one or the other.

JavaScript

$ocLazyLoad.load([
   'testModule.js',
   {type: 'css', path: 'testModuleCtrl'},
   {type: 'html', path: 'testModuleCtrl.html'},
   {type: 'js', path: 'testModuleCtrl'},
   'js!testModuleService',
   'less!testModuleLessFile'
]);

You can load external libs (not angular):

JavaScript

$ocLazyLoad.load(['testModule.js', 'bower_components/bootstrap/dist/js/bootstrap.js', 'anotherModule.js']);

You can also load css and template files:

JavaScript

$ocLazyLoad.load([
	'bower_components/bootstrap/dist/js/bootstrap.js',
	'bower_components/bootstrap/dist/css/bootstrap.css',
	'partials/template1.html'
]);

If you want to load templates, the template file should be an html file with regular script templates. It looks like this:

HTML

<script type="text/ng-template" id="partials/template1.html">
  Content of the template.
</script>

You can put more than one template script in your template file, just make sure that you use different ids:

HTML

<script type="text/ng-template" id="partials/template1.html">
  Content of the first template.
</script>

<script type="text/ng-template" id="partials/template2.html">
  Content of the second template.
</script>

Use config options:

There are two ways to define config options for the load function. You can use a second optional parameter that will define configs for all the modules that you will load, or you can define optional parameters to each module.
For example, these are equivalent (except that the first two files won't be cached in the first example):

JavaScript

$ocLazyLoad.load([{
  files: ['testModule.js', 'bower_components/bootstrap/dist/js/bootstrap.js'],
  cache: false
},{
  files: ['anotherModule.js'],
  cache: true
}]);

And

JavaScript

$ocLazyLoad.load(
  ['testModule.js', 'bower_components/bootstrap/dist/js/bootstrap.js', 'anotherModule.js'],
  {cache: false}
);

If you load a template with the native template loader, you can use any parameter from the $http service (check: https://docs.angularjs.org/api/ng/service/$http#usage).

JavaScript

$ocLazyLoad.load(
	['partials/template1.html', 'partials/template2.html'],
	{cache: false, timeout: 5000}
);

List of parameters:

The existing parameters that you can use are:

Parameter	Type	Default value
cache	Boolean	true
reconfig	Boolean	false
rerun	Boolean	false
serie	Boolean	false
insertBefore	Boolean	undefined

The parameter cache: false works for all native loaders (all requests are cached by default by the browser). If you use it, the loaders will append a timestamp to the url in order to bypass the browser cache:

JavaScript

$ocLazyLoad.load({
	cache: false,
	files: ['testModule.js', 'bower_components/bootstrap/dist/js/bootstrap.js']
});

By default, if you reload a module, the config block won't be invoked again (because often it would lead to unexpected results). But if you really need to execute the config function again, use the parameter reconfig: true:

JavaScript

$ocLazyLoad.load({
	reconfig: true,
	files: ['testModule.js', 'bower_components/bootstrap/dist/js/bootstrap.js']
});

The same problem might happen with run blocks, use rerun: true to rerun the run blocks:

JavaScript

$ocLazyLoad.load({
	rerun: true,
	files: ['testModule.js', 'bower_components/bootstrap/dist/js/bootstrap.js']
});

By default the native loaders will load your files in parallel. If you need to load your files in serie, you can use serie: true:

JavaScript

$ocLazyLoad.load({
	serie: true,
	files: [
		'bower_components/angular-strap/dist/angular-strap.js',
		'bower_components/angular-strap/dist/angular-strap.tpl.js'
	]
});

The files, by default, will be inserted before the last child of the head element. You can override this by using insertBefore: 'cssSelector' (it uses jQuery if available, or document.querySelector otherwise):

JavaScript

$ocLazyLoad.load({
	insertBefore: '#load_css_before',
	files: ['bower_components/bootstrap/dist/css/bootstrap.css']
});

---

Additional methods:

$ocLazyLoad provides a few other methods that might help you in a few specific cases:

• setModuleConfig(moduleConfig): Lets you define a module config object

• getModuleConfig(moduleName): Lets you get a module config object

• getModules(): Returns the list of loaded modules

• isLoaded('moduleName' or [modulesNames]): Lets you check if a module (or a list of modules) has been loaded into Angular or not

• inject('moduleName' or [modulesNames]): if you load your files on your own (with RequireJS, SystemJS or else), you can call inject manually but you will have to provide the names of the modules that you are loading (unless you used toggleWatch before and after loading the files)

• toggleWatch(boolean): let ocLazyLoad know that it should monitor angular.module for new modules. Probably only useful if you use inject on your own. Don't forget to toggle it off after or it might lead to unexpected results