LAZY ANGULARTI&M

7. March 2016

Mato IlicConsulting. Design. Agile Projects. Products. Innovation Hosting.

OBJECTIVESUnified project structure.Scalable architecture.Reasonableperformance.

WHAT'S INSIDE

FUTURE STATES

FUTURE STATES

Click reports link

Yes

Stateloaded?

No

Show reports

Load reports stateLook up in Futures

No

Statefound?

Yes

Throw error

PROJECT STRUCTURE

GENERATORSgithub.com/matoilic/generator-angular-lazy (https://github.com/matoilic/generator-angular-lazy)

APPLICATION COMPONENT

 $: yo angular-lazy 

Generates

the project structure and sets up all tools.the application component.a first state.

STATE COMPONENT

 $: yo angular-lazy:state parent.child [--prefix=] 

Generates

a new UI Router state with template, controller etc.a new entry in states.json in the application component.

UI COMPONENT

 $: yo angular-lazy:component name [--prefix=] 

Generates

A reusable UI component based on Angular's component provider.

DIRECTIVE

 $: yo angular-lazy:directive name [--prefix=] 

Generates

A directive intended to be used as attribute.

ANGULAR LAZYgithub.com/matoilic/angular-lazy (https://github.com/matoilic/angular-lazy)

FUTURE STATE FACTORY

Future States of type "load" will be passed to this factory. It is responsible for loadingand initializing them properly.

COMPONENT LOADER SERVICE

Enables us to manually load components at runtime. Useful if certain applicationparts are only needed when the user performs a certain action or certain criteria aremet.

SYSTEM SERVICE

Wrapper around the import functionality of SystemJS. Gives us the possibility tomock import calls within tests.

ANGULAR LAZY BUNDLERgithub.com/matoilic/angular-lazy-bundler (https://github.com/matoilic/angular-lazy-bundler)

PURPOSE

Bundles each component separately into one file.Optimizes loading process for 3rd-party packages.Can bundle multiple components and 3rd-party packages into one file.

THE END

?