Build Status Join the chat at

A lightweight and flexible AngularJS lazy loading scheme.

StateLoadable is a modular component designed to be used with StateRouter, an AngularJS state-based router.


To install in your project, install from npm (remember you'll also need to install angular-state-router since it is a dependency)

Quick Start

Include the state-loadable.min.js script tag in your .html:

In app.js add angular-state-router and angular-state-loadable as a dependency when your application module is instantiated.

During the configuration of StateRouter utilize the parameter load to associate a script file to lazy load. Loadables will only load once, that is, the first time that they are needed.

Where is the following file:

StateLoadable is meant to be flexible and therefore does not impose any scheme for registering angular components (directives, controllers, filters, services, providers, and/or ... etc.)

We suggest using the scheme in the example code for late registration of these components.

Remember that $stateProvider is different from $state.


Events are broadcast on the $rootScope.


This event is emitted when a loadable object starts loading.


This event is emitted when a loadable object progresses loading. This event must occur once before 'end' is emitted.


This event is emitted when a loadable object completes loading.


This event is emitted when an error occurred during loading of a loadable.


Copyright (c) 2015 Henry Tseng

Released under the MIT license. See LICENSE for details.

comments powered by Disqus
This page was last updated about 3 years ago.