Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
10. Routing and Navigation 2
Search
iliya
March 09, 2017
0
63
10. Routing and Navigation 2
Examples:
https://plnkr.co/edit/l4sBRdwtQFoOUimp1259?p=preview
iliya
March 09, 2017
Tweet
Share
More Decks by iliya
See All by iliya
9. Routing and Navigation
iliaidakiev
0
70
6. Change Detection
iliaidakiev
0
28
8. Custom validations, controls and multi-providers
iliaidakiev
0
47
7. Forms and simple validations
iliaidakiev
0
71
5. Predictable Reactive State Management
iliaidakiev
1
80
3. Angular CLI. Custom Directives. Renderer
iliaidakiev
0
66
4. Dependency Injection. Providers and Injectors
iliaidakiev
0
90
2. Functional Programming and RxJS
iliaidakiev
3
520
1. NG Introduction
iliaidakiev
0
150
Featured
See All Featured
YesSQL, Process and Tooling at Scale
rocio
173
14k
Practical Orchestrator
shlominoach
190
11k
Into the Great Unknown - MozCon
thekraken
40
2k
[RailsConf 2023] Rails as a piece of cake
palkan
56
5.8k
Statistics for Hackers
jakevdp
799
220k
Producing Creativity
orderedlist
PRO
347
40k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
283
13k
Typedesign – Prime Four
hannesfritz
42
2.8k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
For a Future-Friendly Web
brad_frost
179
9.9k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Transcript
None
Today's Schedule 1. Named Outlets 2. Route Guards 3. Pipes
4. Angular 4
Named Outlets ( Secondary routes ) • Independent of each
other • Work in combination with other routes • Displayed in named outlets
Setting up a secondary route (1)
Setting up a secondary route (2)
Setting up a secondary route (2)
Secondary route URL
Demo https://plnkr.co/edit/l4sBRdwtQFoOUimp1259?p=preview
Protecting Routes ( Route Guards ) • Authorization • Authentication
• Prefetching data • Making sure data is saved before navigating elsewhere
Guard Return Value Promise<boolean> | Observable<boolean>
Guards • CanActivate • CanActivateChild • CanDeactivate • Resolve •
CanLoad
Auth Guard Example (1)
Auth Guard Example (2)
Resolver Example (1)
Resolver Example (2)
Resolver Example (3)
Demo https://plnkr.co/edit/l4sBRdwtQFoOUimp1259?p=preview
Pipes
Pipes A pipe takes in data as input and transforms
it to a desired output
Pipe Types • Pure (default) • Impure
Pure Pipes A pure pipe is executed only when Angular
detects a pure change to the input value. A pure change is either a change to a primitive input value (String, Number, Boolean, Symbol) or a changed object reference (Date, Array, Function, Object).
Impure Pipes Angular executes an impure pipe during every component
change detection cycle. An impure pipe is called often, as often as every keystroke or mouse-move.
JSON Pipe https://github.com/angular/angular/blob/ f2adb2900d93677517215a8ab6ccc10d95a5df48/modules/ %40angular/common/src/pipes/json_pipe.ts
Async Pipe https://github.com/angular/angular/blob/ f2adb2900d93677517215a8ab6ccc10d95a5df48/modules/ %40angular/common/src/pipes/async_pipe.ts
Build-in Pipes • DatePipe • UpperCasePipe • LowerCasePipe • CurrencyPipe
• PercentPipe
Not existing Pipes • FilterPipe • OrderByPipe
Why ? • Poor performance • Problem with Aggressive Minification
Custom pipe
Custom pipe usage
Angular 4 Release date: March 22
Latest RC
https://github.com/angular/angular/blob/ master/CHANGELOG.md#400-rc1-2017-02-24
Tracking Angular Changes https://github.com/angular/angular/blob/master/CHANGELOG.md
Questions?