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
?