Upgrade to Pro — share decks privately, control downloads, hide ads and more …

10. Routing and Navigation 2

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for iliya iliya
March 09, 2017
0
64

10. Routing and Navigation 2

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

Avatar for iliya

iliya

March 09, 2017
Tweet

More Decks by iliya

See All by iliya
9. Routing and Navigation
Avatar for iliya iliaidakiev
0
72
6. Change Detection
Avatar for iliya iliaidakiev
0
29
8. Custom validations, controls and multi-providers
Avatar for iliya iliaidakiev
0
48
7. Forms and simple validations
Avatar for iliya iliaidakiev
0
73
5. Predictable Reactive State Management
Avatar for iliya iliaidakiev
1
81
3. Angular CLI. Custom Directives. Renderer
Avatar for iliya iliaidakiev
0
71
4. Dependency Injection. Providers and Injectors
Avatar for iliya iliaidakiev
0
94
2. Functional Programming and RxJS
Avatar for iliya iliaidakiev
3
520
1. NG Introduction
Avatar for iliya iliaidakiev
0
160

Featured

See All Featured
Introduction to Domain-Driven Design and Collaborative software design
Avatar for Kenny Baas-Schwegler baasie
1
590
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
40
2.3k
Why Your Marketing Sucks and What You Can Do About It - Sophie Logan
Avatar for Sophie Logan marketingsoph
0
76
Code Reviewing Like a Champion
Avatar for maltzj maltzj
527
40k
The AI Revolution Will Not Be Monopolized: How open-source beats economies of scale, even for LLMs
Avatar for Ines Montani inesmontani
PRO
3
3k
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
39
3k
Code Review Best Practice
Avatar for Trisha Gee trishagee
74
20k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
27k
Crafting Experiences
Avatar for Bethany Jepchumba bethany
1
49
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
281
24k
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
408
66k
Measuring Dark Social's Impact On Conversion and Attribution
Avatar for Stephen Akadiri stephenakadiri
1
130

Transcript

  1. None

  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?