Skip to content

jack4it/angular-1x-lazy-load

Repository files navigation

What this project is for?

A solution of lazy loading Angular 1.x modules using a mix of various technologies/tooling, including systemjs, ocLazyLoad, ui-router, ui-router-extras future state and not-required-but-great-to-have ES6/ES2015.

This demo project accompanies this blog post of mine http://jackma.com/2015/12/30/a-lazy-loading-solution-for-angular-1-x/.

Usage

Clone this repository:

git clone httpshttps://github.com/jack4it/angular-1x-lazy-load

Install all npm packages:

npm install --no-optional

Install all jspm packages:

jspm install

Run the bundle script (this is to be used in index.html):

node bundle.js

Finally launch browser-sync and browse to the examples to see the results:

gulp serve

Examples

This demo project defines in total three Angular 1.x modules. The app module as the initial loaded main app module and the other two lazy-loaded modules, namely contact and about, in their own folders

app.js: The main entry point of the app where systemjs/ocLazyLoad/future state are wired up. In other words, the lazy-loaded modules (future states) are declared here

systemLazyLoadService.js: The key of connecting systemjs and ocLazyLoad. This is registered as an Angular service and $futureStateProvider.stateFactory.

index-debug.html: An example of how to lazy load Angular 1.x modules in browser on the fly during development time

bundle.js: A script example of how to generate the corresponding bundles based on the declared future states in node during build time for production

index.html: An example of how to lazy load the bundled modules in production environment

License

MIT

About

A demo project to show how to lazy load Angular 1.x modules using systemjs, ocLazyLoad and ui-router-extras future state

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published