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
What's in a price? How to price your products and services
michaelherold
246
12k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Statistics for Hackers
jakevdp
799
220k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Why Our Code Smells
bkeepers
PRO
337
57k
BBQ
matthewcrist
89
9.7k
We Have a Design System, Now What?
morganepeng
53
7.7k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
228
22k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
670
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
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?