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
58
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
60
6. Change Detection
iliaidakiev
0
19
8. Custom validations, controls and multi-providers
iliaidakiev
0
36
7. Forms and simple validations
iliaidakiev
0
57
5. Predictable Reactive State Management
iliaidakiev
1
74
3. Angular CLI. Custom Directives. Renderer
iliaidakiev
0
58
4. Dependency Injection. Providers and Injectors
iliaidakiev
0
78
2. Functional Programming and RxJS
iliaidakiev
3
490
1. NG Introduction
iliaidakiev
0
150
Featured
See All Featured
Git: the NoSQL Database
bkeepers
PRO
423
63k
What the flash - Photography Introduction
edds
64
11k
How GitHub (no longer) Works
holman
305
140k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
245
20k
What's new in Ruby 2.0
geeforr
337
31k
Done Done
chrislema
178
15k
Build your cross-platform service in a week with App Engine
jlugia
226
17k
Designing for humans not robots
tammielis
247
25k
The Straight Up "How To Draw Better" Workshop
denniskardys
228
130k
Six Lessons from altMBA
skipperchong
22
3k
Design by the Numbers
sachag
274
18k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
12
1k
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?