10. Routing and Navigation 2

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

Today's Schedule 1. Named Outlets 2. Route Guards 3. Pipes 4. Angular 4

Slide 3

Slide 3 text

Named Outlets ( Secondary routes ) • Independent of each other • Work in combination with other routes • Displayed in named outlets

Slide 4

Slide 4 text

Setting up a secondary route (1)

Slide 5

Slide 5 text

Setting up a secondary route (2)

Slide 6

Slide 6 text

Setting up a secondary route (2)

Slide 7

Slide 7 text

Secondary route URL

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

Protecting Routes ( Route Guards ) • Authorization • Authentication • Prefetching data • Making sure data is saved before navigating elsewhere

Slide 10

Slide 10 text

Guard Return Value Promise | Observable

Slide 11

Slide 11 text

Guards • CanActivate • CanActivateChild • CanDeactivate • Resolve • CanLoad

Slide 12

Slide 12 text

Auth Guard Example (1)

Slide 13

Slide 13 text

Auth Guard Example (2)

Slide 14

Slide 14 text

Resolver Example (1)

Slide 15

Slide 15 text

Resolver Example (2)

Slide 16

Slide 16 text

Resolver Example (3)

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

Pipes

Slide 19

Slide 19 text

Pipes A pipe takes in data as input and transforms it to a desired output

Slide 20

Slide 20 text

Pipe Types • Pure (default) • Impure

Slide 21

Slide 21 text

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).

Slide 22

Slide 22 text

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.

Slide 23

Slide 23 text

JSON Pipe https://github.com/angular/angular/blob/ f2adb2900d93677517215a8ab6ccc10d95a5df48/modules/ %40angular/common/src/pipes/json_pipe.ts

Slide 24

Slide 24 text

Async Pipe https://github.com/angular/angular/blob/ f2adb2900d93677517215a8ab6ccc10d95a5df48/modules/ %40angular/common/src/pipes/async_pipe.ts

Slide 25

Slide 25 text

Build-in Pipes • DatePipe • UpperCasePipe • LowerCasePipe • CurrencyPipe • PercentPipe

Slide 26

Slide 26 text

Not existing Pipes • FilterPipe • OrderByPipe

Slide 27

Slide 27 text

Why ? • Poor performance • Problem with Aggressive Miniﬁcation

Slide 28

Slide 28 text

Custom pipe

Slide 29

Slide 29 text

Custom pipe usage

Slide 30

Slide 30 text

Angular 4 Release date: March 22

Slide 31

Slide 31 text

Latest RC

Slide 32

Slide 32 text

https://github.com/angular/angular/blob/ master/CHANGELOG.md#400-rc1-2017-02-24

Slide 33

Slide 33 text

Tracking Angular Changes https://github.com/angular/angular/blob/master/CHANGELOG.md

Slide 34

Slide 34 text

Questions?