10. Routing and Navigation 2

Examples:
https://plnkr.co/edit/l4sBRdwtQFoOUimp1259?p=preview

Transcript

2. Today's Schedule 1. Named Outlets 2. Route Guards 3. Pipes 4. Angular 4
3. Named Outlets ( Secondary routes ) • Independent of each other • Work in combination with other routes • Displayed in named outlets
4. Setting up a secondary route (1)
5. Setting up a secondary route (2)
6. Setting up a secondary route (2)
7. Secondary route URL
8. Demo https://plnkr.co/edit/l4sBRdwtQFoOUimp1259?p=preview
9. Protecting Routes ( Route Guards ) • Authorization • Authentication • Prefetching data • Making sure data is saved before navigating elsewhere
10. Guard Return Value Promise<boolean> | Observable<boolean>
11. Guards • CanActivate • CanActivateChild • CanDeactivate • Resolve • CanLoad
12. Auth Guard Example (1)
13. Auth Guard Example (2)
14. Resolver Example (1)
15. Resolver Example (2)
16. Resolver Example (3)
17. Demo https://plnkr.co/edit/l4sBRdwtQFoOUimp1259?p=preview
18. Pipes
19. Pipes A pipe takes in data as input and transforms it to a desired output
20. Pipe Types • Pure (default) • Impure
21. 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).
22. 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.
23. JSON Pipe https://github.com/angular/angular/blob/ f2adb2900d93677517215a8ab6ccc10d95a5df48/modules/ %40angular/common/src/pipes/json_pipe.ts
24. Async Pipe https://github.com/angular/angular/blob/ f2adb2900d93677517215a8ab6ccc10d95a5df48/modules/ %40angular/common/src/pipes/async_pipe.ts
25. Build-in Pipes • DatePipe • UpperCasePipe • LowerCasePipe • CurrencyPipe • PercentPipe
26. Not existing Pipes • FilterPipe • OrderByPipe
27. Why ? • Poor performance • Problem with Aggressive Minification
28. Custom pipe
29. Custom pipe usage
30. Angular 4 Release date: March 22
31. Latest RC
32. https://github.com/angular/angular/blob/ master/CHANGELOG.md#400-rc1-2017-02-24
33. Tracking Angular Changes https://github.com/angular/angular/blob/master/CHANGELOG.md
34. Questions?