lazy angular · 3/7/2016 · state component $: yo angular-lazy:state parent.child [--prefix=]...
TRANSCRIPT
![Page 1: LAZY ANGULAR · 3/7/2016 · 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](https://reader034.vdocuments.site/reader034/viewer/2022042300/5eca84c067712823407c8cbd/html5/thumbnails/1.jpg)
LAZY ANGULARTI&M
7. March 2016
Mato IlicConsulting. Design. Agile Projects. Products. Innovation Hosting.
![Page 2: LAZY ANGULAR · 3/7/2016 · 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](https://reader034.vdocuments.site/reader034/viewer/2022042300/5eca84c067712823407c8cbd/html5/thumbnails/2.jpg)
OBJECTIVESUnified project structure.Scalable architecture.Reasonableperformance.
![Page 3: LAZY ANGULAR · 3/7/2016 · 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](https://reader034.vdocuments.site/reader034/viewer/2022042300/5eca84c067712823407c8cbd/html5/thumbnails/3.jpg)
WHAT'S INSIDE
![Page 4: LAZY ANGULAR · 3/7/2016 · 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](https://reader034.vdocuments.site/reader034/viewer/2022042300/5eca84c067712823407c8cbd/html5/thumbnails/4.jpg)
FUTURE STATES
![Page 5: LAZY ANGULAR · 3/7/2016 · 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](https://reader034.vdocuments.site/reader034/viewer/2022042300/5eca84c067712823407c8cbd/html5/thumbnails/5.jpg)
FUTURE STATES
Click reports link
Yes
Stateloaded?
No
Show reports
Load reports stateLook up in Futures
No
Statefound?
Yes
Throw error
![Page 6: LAZY ANGULAR · 3/7/2016 · 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](https://reader034.vdocuments.site/reader034/viewer/2022042300/5eca84c067712823407c8cbd/html5/thumbnails/6.jpg)
PROJECT STRUCTURE
![Page 7: LAZY ANGULAR · 3/7/2016 · 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](https://reader034.vdocuments.site/reader034/viewer/2022042300/5eca84c067712823407c8cbd/html5/thumbnails/7.jpg)
GENERATORSgithub.com/matoilic/generator-angular-lazy (https://github.com/matoilic/generator-angular-lazy)
![Page 8: LAZY ANGULAR · 3/7/2016 · 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](https://reader034.vdocuments.site/reader034/viewer/2022042300/5eca84c067712823407c8cbd/html5/thumbnails/8.jpg)
APPLICATION COMPONENT
$: yo angular-lazy
Generates
the project structure and sets up all tools.the application component.a first state.
![Page 9: LAZY ANGULAR · 3/7/2016 · 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](https://reader034.vdocuments.site/reader034/viewer/2022042300/5eca84c067712823407c8cbd/html5/thumbnails/9.jpg)
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.
![Page 10: LAZY ANGULAR · 3/7/2016 · 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](https://reader034.vdocuments.site/reader034/viewer/2022042300/5eca84c067712823407c8cbd/html5/thumbnails/10.jpg)
UI COMPONENT
$: yo angular-lazy:component name [--prefix=]
Generates
A reusable UI component based on Angular's component provider.
![Page 11: LAZY ANGULAR · 3/7/2016 · 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](https://reader034.vdocuments.site/reader034/viewer/2022042300/5eca84c067712823407c8cbd/html5/thumbnails/11.jpg)
DIRECTIVE
$: yo angular-lazy:directive name [--prefix=]
Generates
A directive intended to be used as attribute.
![Page 12: LAZY ANGULAR · 3/7/2016 · 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](https://reader034.vdocuments.site/reader034/viewer/2022042300/5eca84c067712823407c8cbd/html5/thumbnails/12.jpg)
ANGULAR LAZYgithub.com/matoilic/angular-lazy (https://github.com/matoilic/angular-lazy)
![Page 13: LAZY ANGULAR · 3/7/2016 · 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](https://reader034.vdocuments.site/reader034/viewer/2022042300/5eca84c067712823407c8cbd/html5/thumbnails/13.jpg)
FUTURE STATE FACTORY
Future States of type "load" will be passed to this factory. It is responsible for loadingand initializing them properly.
![Page 14: LAZY ANGULAR · 3/7/2016 · 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](https://reader034.vdocuments.site/reader034/viewer/2022042300/5eca84c067712823407c8cbd/html5/thumbnails/14.jpg)
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.
![Page 15: LAZY ANGULAR · 3/7/2016 · 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](https://reader034.vdocuments.site/reader034/viewer/2022042300/5eca84c067712823407c8cbd/html5/thumbnails/15.jpg)
SYSTEM SERVICE
Wrapper around the import functionality of SystemJS. Gives us the possibility tomock import calls within tests.
![Page 16: LAZY ANGULAR · 3/7/2016 · 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](https://reader034.vdocuments.site/reader034/viewer/2022042300/5eca84c067712823407c8cbd/html5/thumbnails/16.jpg)
ANGULAR LAZY BUNDLERgithub.com/matoilic/angular-lazy-bundler (https://github.com/matoilic/angular-lazy-bundler)
![Page 17: LAZY ANGULAR · 3/7/2016 · 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](https://reader034.vdocuments.site/reader034/viewer/2022042300/5eca84c067712823407c8cbd/html5/thumbnails/17.jpg)
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.
![Page 18: LAZY ANGULAR · 3/7/2016 · 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](https://reader034.vdocuments.site/reader034/viewer/2022042300/5eca84c067712823407c8cbd/html5/thumbnails/18.jpg)
THE END
?