1 of 78

Routing in Eleven Dimensions

With Component Router

Brian Ford�Slides: goo.gl/n38EDf

Angular Connect, London, October 2015

2 of 78

One Question

Angular Connect, London, October 2015

3 of 78

Is Angular Actually Recovered Extraterrestrial Technology?

Angular Connect, London, October 2015

4 of 78

Consider an Email App

Angular Connect, London, October 2015

5 of 78

URGENT: this flag is orange

Did you get that thing I sent you?

consectetur adipiscing elit sed

Capitalism happened again

exercitationem ullam corporis suscipit laboriosam

At vero eos et accusamus et�iusto odio dignissimos

Your flight from ABC to DEF

Angular Connect, London, October 2015

6 of 78

Don't forget important things like your laptop

Angular Connect, London, October 2015

7 of 78

Angular Connect, London, October 2015

8 of 78

Routing Basics

Angular Connect, London, October 2015

9 of 78

URGENT: this flag is orange

Did you get that thing I sent you?

consectetur adipiscing elit sed

Capitalism happened again

exercitationem ullam corporis suscipit laboriosam

At vero eos et accusamus et�iusto odio dignissimos

Your flight from ABC to DEF

Angular Connect, London, October 2015

10 of 78

URGENT: this flag is orange

Did you get that thing I sent you?

consectetur adipiscing elit sed

Capitalism happened again

exercitationem ullam corporis suscipit laboriosam

At vero eos et accusamus et�iusto odio dignissimos

Your flight from ABC to DEF

Angular Connect, London, October 2015

11 of 78

URGENT: this flag is orange

Did you get that thing I sent you?

consectetur adipiscing elit sed

Capitalism happened again

exercitationem ullam corporis suscipit laboriosam

At vero eos et accusamus et�iusto odio dignissimos

Your flight from ABC to DEF

<router-outlet>

Angular Connect, London, October 2015

12 of 78

AppCmp

outlet

IndexCmp

DetailCmp

SearchCmp

example.com/

example.com/email/1234

example.com/search?query=github

Angular Connect, London, October 2015

13 of 78

Route Config– URL to component

IndexCmp

DetailCmp

SearchCmp

example.com/

example.com/email/1234

example.com/search?query=github

Angular Connect, London, October 2015

14 of 78

Route Config– URL to component

@Component( … )�@RouteConfig([� { path: '/', component: IndexCmp },� { path: '/email/:id', component: EmailCmp },� { path: '/search', component: SearchCmp }�])�class AppCmp {}

Angular Connect, London, October 2015

15 of 78

Route Config– the path property

The "path" part of the route config:��– '/' – matches '/' or '' (empty string)�– '/search' – matches the URL '/search'�– '/:id' – matches any string, provides a RouteParam named id

More on this DSL later...

Angular Connect, London, October 2015

16 of 78

Route Params

@Component( … )�@RouteConfig([� { path: '/', component: IndexCmp },� { path: '/email/:id', component: EmailCmp },� { path: '/search', component: SearchCmp }�])�class AppCmp {}

Angular Connect, London, October 2015

17 of 78

Route Params

@Component( … )�class EmailCmp {� constructor(params: RouteParams) {� this.id = params.get('id');� }�}

Angular Connect, London, October 2015

18 of 78

URGENT: this flag is orange

Did you get that thing I sent you?

consectetur adipiscing elit sed

Capitalism happened again

exercitationem ullam corporis suscipit laboriosam

At vero eos et accusamus et�iusto odio dignissimos

Your flight from ABC to DEF

example.com/

Angular Connect, London, October 2015

19 of 78

Don't forget important things like your laptop

example.com/email/1234

Angular Connect, London, October 2015

20 of 78

example.com/search?query=github%20angular

Angular Connect, London, October 2015

21 of 78

Angular Connect, London, October 2015

22 of 78

Creating Links

Angular Connect, London, October 2015

23 of 78

Creating Links– Naming Routes

@Component( … )�@RouteConfig([� { path: '/', component: IndexCmp, as: 'Index' },� { path: '/email/:id', component: EmailCmp, as: 'Email' },� { path: '/search', component: SearchCmp, as: 'Search' }�])�class AppCmp {}

Angular Connect, London, October 2015

24 of 78

Creating Links

@Component({� selector: 'app-cmp'� template: `<router-outlet></router-outlet>`,� directives: ROUTER_DIRECTIVES�})�@RouteConfig([� { path: '/', component: IndexCmp, as: 'Index' },� { path: '/email/:id', component: EmailCmp, as: 'Email' },� { path: '/search', component: SearchCmp, as: 'Search' }�])�class AppCmp {}

Angular Connect, London, October 2015

25 of 78

Creating Links

@Component({� selector: 'app-cmp'� template: `<a [router-link]="['/Index']">Index</a>� <a [router-link]="['/Search']">Search</a>� <router-outlet></router-outlet>`,� directives: ROUTER_DIRECTIVES�})�@RouteConfig([� { path: '/', component: IndexCmp, as: 'Index' },� { path: '/email/:id', component: EmailCmp, as: 'Email' },� { path: '/search', component: SearchCmp, as: 'Search' }�])�class AppCmp {}

Angular Connect, London, October 2015

26 of 78

Link DSL

<a [router-link]=" [ '/Index' ] ">Email Index</a>

Absolute

Route name

Data binding

JavaScript Array

Angular Connect, London, October 2015

27 of 78

Link DSL

AppCmp's @RouteConfig� { path: '/', component: HomeCmp, as: 'Index' }

<a [router-link]="[ '/Index' ]">home</a>

<a href="/">home</a>

Angular Connect, London, October 2015

28 of 78

Link DSL mirrors the URL, but uses route names and params instead of URL segments

Angular Connect, London, October 2015

29 of 78

Link DSL– Params

@Component( … )�@RouteConfig([� { path: '/', component: IndexCmp, as: 'Index' },� { path: '/email/:id', component: EmailCmp, as: 'Email' },� { path: '/search', component: SearchCmp, as: 'Search' }�])�class AppCmp {}

Angular Connect, London, October 2015

30 of 78

Link DSL– Params

@Component({� selector: 'index-cmp'� template: `�<ul>� <li *ng-for="#email of emails">� <a [router-link]="[ '/Email', { id: email.id } ]">{{ email.subject }}</a>� </li>�</ul>`,� directives: ROUTER_DIRECTIVES�})�class IndexCmp {}

Angular Connect, London, October 2015

31 of 78

Link DSL– Params

<a [router-link]=" [ '/Email' , { id: 123 } ] ">

Route name

JavaScript Array

JavaScript Object

Route params

Angular Connect, London, October 2015

32 of 78

Link DSL– Params

� { path: '/email/:id', component: EmailCmp, as: 'Email' }

<a [router-link]="[ '/Email', { id: 123 } ]">Hello</a>

<a href="/email/123">Hello</a>

AppCmp's @RouteConfig

Angular Connect, London, October 2015

33 of 78

Link DSL is robust, survives refactors better than URLs

Angular Connect, London, October 2015

34 of 78

Fundamental Components of Routing

  1. RouteConfig Metadata
  2. RouterOutlet Directive
  3. RouterLink Directive

Angular Connect, London, October 2015

35 of 78

Child Routes

Angular Connect, London, October 2015

36 of 78

Here are those files

Hi friend! I know how much you like files, so I sent some to you in this email.

Dave to me

Lorem ipsum dolor sit amet, sit atqui imperdiet moderatius in.

​

Quo regione gloriatur scripserit ne, eos ei dicunt fastidii expetendis, eos ut legendos consetetur. Pri eu consulatu gubergren, euismod praesent vix at, esse delenit liberavisse usu id.

​

Purto volumus omnesque nec ei. Nec affert oblique nonumes ex.At quo maiestatis consectetuer, nam quidam iisque et. Autem affert saperet eum ut, id mel percipit facilisi. Quot suscipiantur deterruisset id eos. Ex quo mazim omnes imperdiet.Ad eos prima aliquip sententiae, ancillae accusata ius id, his ei prodesset elaboraret interpretaris.

​

Ex graeco accommodare mel, nam reque argumentum eu. Ea elitr mnesarchum deterruisset qui.

​

At augue persius gloriatur per, falli laudem tamquam pri ut. Sea mazim harum intellegat ea, usu ea dico labore quidam. Mediocrem ullamcorper est ea.

Dave to me

Angular Connect, London, October 2015

37 of 78

Here are those files

Hi friend! I know how much you like files, so I sent some to you in this email.

Dave to me

some_file.js��last modified: Fri 3:21pm�size: 456 kB

Angular Connect, London, October 2015

38 of 78

Here are those files

Hi friend! I know how much you like files, so I sent some to you in this email.

Dave to me

some_file.js��last modified: Fri 3:21pm�size: 456 kB

<router-outlet>

Angular Connect, London, October 2015

39 of 78

Child Routes allow you encapsulate nested routes

Angular Connect, London, October 2015

40 of 78

Child Routes– EmailCmp Config

@Component( … )�@RouteConfig([� { path: '/', component: ThreadCmp, as: 'Thread' },� { path: '/file/:id', component: FileCmp, as: 'File' }�])�class EmailCmp {}

Angular Connect, London, October 2015

41 of 78

Child Routes– EmailCmp Config

@Component({� selector: 'index-cmp'� template: `<h2>{{subject}}</h2>� <p>{{body}}</p>� <router-outlet><router-outlet>`,� directives: ROUTER_DIRECTIVES�})�@RouteConfig( … )�class EmailCmp {}

Angular Connect, London, October 2015

42 of 78

Child Routes– AppCmp Config

@Component( … )�@RouteConfig([� { path: '/', component: IndexCmp, as: 'Index' },� { path: '/email/:id/...', component: EmailCmp, as: 'Email' },� { path: '/search', component: SearchCmp, as: 'Search' }�])�class AppCmp {}

Angular Connect, London, October 2015

43 of 78

Child Routes– Link

<a [router-link]=" [ '/Email' , { id: 123 }� 'Thread' ] ">

Route name

Route params

Child route name

Angular Connect, London, October 2015

44 of 78

Child Routes– Link

� { path: '/email/:id/...', component: EmailCmp, as: 'Email' }

<a [router-link]="[ '/Email', { id: 123 }, 'Thread' ]">Hello</a>

<a href="/email/123">Hello</a>

AppCmp's @RouteConfig

Angular Connect, London, October 2015

45 of 78

Child Routes– Link

� { path: '/', component: ThreadCmp, as: 'Thread' }

<a [router-link]="[ '/Email', { id: 123 }, 'Thread' ]">Hello</a>

<a href="/email/123">Hello</a>

EmailCmp's @RouteConfig

Angular Connect, London, October 2015

46 of 78

Child Routes– Link

<a [router-link]=" [ '/Email' , { id: 123 }� 'File', { id: 'xyz' } ] ">

Route name

Route params

Child route name

Child route params

Angular Connect, London, October 2015

47 of 78

Child Routes– Link

� { path: '/email/:id/...', component: EmailCmp, as: 'Email' }

<a [router-link]="[ '/Email', { id: 123 },� 'File', { id: 'xyz' } ]">Hello</a>

<a href="/email/123/...">Hello</a>

AppCmp's @RouteConfig

Angular Connect, London, October 2015

48 of 78

Child Routes– Link

� { path: '/file/:id', component: ThreadCmp, as: 'File' }

<a href="/email/123/file/xyz">Hello</a>

<a [router-link]="[ '/Email', { id: 123 },� 'File', { id: 'xyz' } ]">Hello</a>

EmailCmp's @RouteConfig

Angular Connect, London, October 2015

49 of 78

Child Routes have their own params– no need to worry about collisions

Angular Connect, London, October 2015

50 of 78

Child Routes– Relative Links

<a [router-link]=" [ '/Email' , { id: 123 }� 'File', { id: 'xyz' } ] ">

Route name

Route params

Child route name

Child route params

Absolute

Angular Connect, London, October 2015

51 of 78

Child Routes– Relative Links

<a [router-link]=" [ './File', { id: 'xyz' } ] ">

Child route name

Child route params

Relative Child

Angular Connect, London, October 2015

52 of 78

Eleven-dimensional Routing�(with auxiliary routes)

Angular Connect, London, October 2015

53 of 78

Angular Connect, London, October 2015

54 of 78

Angular Connect, London, October 2015

55 of 78

Angular Connect, London, October 2015

56 of 78

Auxiliary Routes allow for multiple independent routes

Angular Connect, London, October 2015

57 of 78

Auxiliary Route– Outlets

Each component has one primary and zero or more auxiliary outlets.

Auxiliary outlets within the same component must have a unique name.

<router-outlet>

<router-outlet name="draft">

AppCmp

Angular Connect, London, October 2015

58 of 78

Auxiliary Routes– Named Outlet

@Component({� selector: 'app-cmp'� template: `<a [router-link]="['/Index']">Index</a>� <a [router-link]="['/Search']">Search</a>� <router-outlet></router-outlet>� <router-outlet name="draft"></router-outlet>`,� directives: ROUTER_DIRECTIVES�})�@RouteConfig( … )�class AppCmp {}

Angular Connect, London, October 2015

59 of 78

Auxiliary Routes– Config

@Component( … )�@RouteConfig([� { path: '/', component: IndexCmp, as: 'Index' },� { path: '/email/:id', component: EmailCmp, as: 'Email' },� { path: '/search', component: SearchCmp, as: 'Search' },� { aux: '/draft', component: DraftCmp, as: 'Draft' }�])�class AppCmp {}

Angular Connect, London, October 2015

60 of 78

awks

like "awkward"

"aux" is pronounced

Angular Connect, London, October 2015

61 of 78

Auxiliary Routes– Link

@Component({� selector: 'app-cmp'� template: `<a [router-link]="['/Index']">Index</a>� <a [router-link]="['/Search']">Search</a>� <router-outlet></router-outlet>� <router-outlet name="draft"></router-outlet>� <a [router-link]="['/', ['Draft'] ]">New Email</a>`,� directives: ROUTER_DIRECTIVES�})�@RouteConfig( … )�class AppCmp {}

Angular Connect, London, October 2015

62 of 78

Auxiliary Routes– Link

<a [router-link]=" [ '/' , [ 'Draft' ] ]">

JavaScript Array

Aux Route Name

Absolute

Angular Connect, London, October 2015

63 of 78

Auxiliary Routes– URL

URL segments represent hierarchy:

/parent/child

To represent nesting, we introduce parens:

/parent(parent-aux)/child(child-aux)

Angular Connect, London, October 2015

64 of 78

All Routes are First-class Citizens

Angular Connect, London, October 2015

65 of 78

Auxiliary Routes– Key Points

  • Can have their own child routes
  • Can have their own auxiliary routes
  • Have their own route-params
  • Have their own history stack

Angular Connect, London, October 2015

66 of 78

Angular Connect, London, October 2015

67 of 78

A tree of trees

AppCmp

Primary

Email

IndexCmp

EmailCmp

SearchCmp

ComposeEmailCmp

Modal

ConfirmDeleteCmp

Angular Connect, London, October 2015

68 of 78

Trees of trees of trees of trees

Angular Connect, London, October 2015

69 of 78

Is Angular Recovered Extraterrestrial Technology?

Angular Connect, London, October 2015

70 of 78

Angular Connect, London, October 2015

71 of 78

Angular Connect, London, October 2015

72 of 78

Angular Connect, London, October 2015

73 of 78

Angular Connect, London, October 2015

74 of 78

Angular Connect, London, October 2015

75 of 78

Angular Connect, London, October 2015

76 of 78

Angular Connect, London, October 2015

77 of 78

Component Router– In Conclusion

Provides a few simple parts: RouteConfig, RouterOutlet, and RouterLink – that combine in many ways.

Child and Auxiliary Routes fully compose – you can nest Child Routes inside Auxiliary Routes and vice-versa.

Linking DSL makes navigation robust, easy.

No scientific proof that Angular was created by aliens, but I believe the proof is out there.

Angular Connect, London, October 2015

78 of 78

The End

Thanks!

Angular Connect, London, October 2015