Evening Talk

Routing

 Preparation

1. Import Module

import { RouterModule } from '@angular/router';

@NgModule({
  imports: [ RouterModule.forRoot(appRoutes) ]
})

2. Define Routes

const appRoutes: Routes = [
  { path: 'crisis-center', component: CrisisListComponent },
  { path: 'hero/:id',      component: HeroDetailComponent },
];

Usage

1. Import router to component

public goToSecretPage() {
  this.router.navigate(['/secret']);
}
import { Router } from '@angular/router';

@Component({ ... })
export class MyComponent {
  constructor(private router: Router) {}
}

2. Navigation

( inside Component )

Usage

1. routerLink directive

<nav>
  <a routerLink="/home" routerLinkActive="active">Home</a>
  <a routerLink="/secret" routerLinkActive="active">Secret</a>
</nav>

( inside Template )

2. router-outlet directive

<main>
  <router-outlet></router-outlet>
</main>

(don't forget)

<base href="/">

Code Time

Links:

Routing

By Anton Bely

Made with Slides.com

Routing

  • 3,952

More from Anton Bely