let's route this

    [
      {
        path: '',
        canActivate: [CanActivateMessagesAndContacts],
        resolve: {
          token: TokenNeededForBothMessagsAndContacts
        },
    
        children: [
          {
            path: 'messages',
            component: MesssagesCmp
          },
          {
            path: 'contacts',
            component: ContactsCmp
          }
        ]
      }
    ]

    const routes: Routes = [
      { path: '', component: HomeComponent, pathMatch: 'full' },
      { path: 'studio/:studioId', component: StudioComponent, children: [
        { path: 'artists', component: ArtistsListComponent, outlet: 'list' },
        { path: ':id', component: ArtistDescription, outlet: 'artist' }
      ] }
    ];

  
    <div class="columns">
        <router-outlet name="list"></router-outlet>
        <router-outlet name="artist"></router-outlet>
    </div>

    const routes: Routes = [
      { path: '', component: HomeComponent, pathMatch: 'full' },
      { path: 'studio/:studioId', component: StudioComponent, children: [
        { path: 'artists', component: ArtistsListComponent, outlet: 'list' },
        { path: ':id', component: ArtistDescription, outlet: 'artist' }
      ] }
    ];

   [routerLink]="['/studio/{{studio.id}}', {outlets: {'list': ['artists'], 'artist': ['']}}]">

    http://localhost:4200/studio/4/(artist:1//list:artists) 

    const routes: Routes = [
      { path: '', component: HomeComponent, pathMatch: 'full' },
      { path: 'studio/:studioId', component: StudioComponent, children: [
        { path: 'artists', component: ArtistsListComponent, outlet: 'list' },
        { path: ':id', component: ArtistDescription, outlet: 'artist' }
      ] }
    ];

Ordnung muss sein

- K. Sökölowski

    LanderModule,
    OfferModule,
    LoginModule,
    AffiliateNetworkModule,
    BulkActionsModule,
    PageNotFoundModule

<=  wildcard!

Matching strategy

Matching strategy

    { path: '', component: HomeComponent, pathMatch: 'full' }

    { path: '', component: HomeComponent }

navigate vs navigateByUrl

    /inbox/11/messages/22(popup:compose)

router.navigateByUrl('/inbox/33/messages/44')

router.navigate('/inbox/33/messages/44')

/inbox/33/messages/44(popup:compose)

/inbox/33/messages/44

    
    router.navigate('/inbox/33/messages/44')
    
    router.navigate(['/inbox/33/messages/44'])
    
    router.navigate(['/inbox', 33, 'messages', 44])

Suga suga how you get so fly

Guards

Tak, wiem, że w oryginale to
jest Walker Texas Ranger

• CanActivate
• CanDeactivate
• CanActivateChild
• CanLoad
• Resolve

    { enableTracing: true }

Debugging

Let's talk

• Resolvers vs. async loading inside component (instant click -> action feeling)
• Outlets - they seem to be a bit messy, do we ever wanna use them?
• ActivatedRouteSnapshot vs. Observables ("To avoid unnecessary DOM modifications, the router will reuse the components when the parameters of the corresponding routes change.")
• ???