Embed Size (px)
Citation preview
1
The new Component Router for Angular 2 and 1.x
Manfred Steyer
ManfredSteyer
Current Book
Folie 2
O'Reilly:
AngularJS: Moderne
Webanwendungen und Single Page
Applications mit JavaScript
Steyer, Softic
2
Contents
Overview of Concepts and Scenarios
Getting started
DEMO with Angular 2
Lifecycle-Hooks
DEMO with Angular 2
DEMO with Angular 1.x
Aux-Routes
Page 3
OVERVIEW
Page 4
3
What is the Component Router?
Page 5
New Router-Solution
Angular 2 and 1.x
ActivatingComponents
LazyLoading
HierarchicalRouting
Lifecycle-Hooks
Routing
Page 6
Logo + Menu
Men
u 2
Footer
SPAPlaceholder
4
Routing
Page 7
Logo + Menü
Men
ü 2
Fußzeile
SPAFlight
-Component
/FlightApp#/flights
Routing with History API
Page 8
Logo + Menü
Men
ü 2
Fußzeile
SPAFlight
-Component
/FlightApp/flights
5
Routing with Parameter
Page 9
Logo + Menü
Men
ü 2
Fußzeile
SPAFlight-Edit-
Component
for Flight #17
/FlightApp/flights/17
Hierarchical Routing
Page 11
Logo + Menu
Men
u 2
Footer
SPA
Placeholder
6
Hierarchical Routing
Page 12
Logo + Menu
Men
u 2
Footer
SPA
/FlightApp/flight-bookingF
ligh
tBo
okin
g-C
om
po
ne
nt
Hierarchical Routing
Page 13
Logo + Menu
Men
u 2
Footer
SPA
/FlightApp/flight-booking
Options
Placeholder
Flig
htB
oo
kin
g-C
om
po
ne
nt
+ Child-Router
7
Hierarchical Routing
Page 14
Logo + Menu
Men
u 2
Fußzeile
SPA
/FlightApp/flight-booking/flights
Optionen
Flight-
Component
Flig
htB
oo
kin
g-C
om
po
ne
nt
GETTING STARTED
Page 15
8
Getting started
Page 16
Bundle: router.js ROUTER_PROVIDERS
ROUTER_DIRECTIVES
Getting started
Hash-Strategy
provide(LocationStrategy,
{useClass: HashLocationStrategy})
Path-Strategy (History API)
Default
Base-Url via <base href="…"> or APP_BASE_HREF
Page 17
9
DEMO
Page 18
LIFECYCLE-HOOKS
Page 19
10
What are Lifecycle-Hooks?
Methods within Components
Are called at specific times ("events")
Page 20
Life-Cycle-Hooks
OnActivate routerOnActivate
OnDeactivate routerOnDeactivate
CanDeactivate routerCanDeactivate
@CanActivate
11
CanActivate and CanDeactivate
Possible Results
true
false
Promise
Resolve with true or false
Page 22
DEMO
Page 23
12
AUX-ROUTES
Page 24
Aux-Routes
Page 25
Logo + Menu
Men
u 2
Footer
SPAPlaceholder
Named Placeholder
13
Aux-Routes
Page 26
Logo + Menu
Men
u 2
Footer
SPAFlight-
Component
Named Placeholder
/FlightApp/flights
Aux-Routes
Page 27
Logo + Menu
Men
u 2
Footer
SPAFlight-
Component
Info-Component
/FlightApp/flights(info)
14
Aux-Routes
Page 28
Logo + Menu
Men
u 2
Footer
SPAFlight-
Component
Info-Component
/FlightApp/flights(info/modal)/edit/17
Summary
Component Router: New Routing-Solution for Angular
2 and AngularJS 1.x
Lazy Loading
Hierarchical Routing
Lifecycle-Hooks
Aux Routes
Page 29
![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://img.pdfslide.us/doc/110x75/5eca84c067712823407c8cbd/lazy-angular-372016-state-component-yo-angular-lazystate-prefix-generates.jpg)
![Chapter 1: Creating Our First Component in Angular...Chapter 13: Unit Testing in Angular [ 22 ] Appendix B: Webpack with Angular 8 11 12 export class AppComponent title = lapp works!](https://img.pdfslide.us/doc/110x75/5ed14d4ea7db810bbc0586d4/chapter-1-creating-our-first-component-in-angular-chapter-13-unit-testing.jpg)