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
61
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
69
6. Change Detection
iliaidakiev
0
24
8. Custom validations, controls and multi-providers
iliaidakiev
0
41
7. Forms and simple validations
iliaidakiev
0
69
5. Predictable Reactive State Management
iliaidakiev
1
78
3. Angular CLI. Custom Directives. Renderer
iliaidakiev
0
63
4. Dependency Injection. Providers and Injectors
iliaidakiev
0
86
2. Functional Programming and RxJS
iliaidakiev
3
510
1. NG Introduction
iliaidakiev
0
150
Featured
See All Featured
Product Roadmaps are Hard
iamctodd
PRO
50
11k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Rebuilding a faster, lazier Slack
samanthasiow
80
8.9k
Git: the NoSQL Database
bkeepers
PRO
427
65k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
Designing for humans not robots
tammielis
250
25k
KATA
mclloyd
29
14k
Agile that works and the tools we love
rasmusluckow
328
21k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
A Philosophy of Restraint
colly
203
16k
Designing for Performance
lara
604
68k
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?