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
46
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
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Navigating Team Friction
lara
187
15k
A Tale of Four Properties
chriscoyier
160
23k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Become a Pro
speakerdeck
PRO
28
5.4k
Writing Fast Ruby
sferik
628
62k
Facilitating Awesome Meetings
lara
54
6.4k
Rails Girls Zürich Keynote
gr2m
94
14k
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?