Start routing

[web-dave]

Generiere 6 neue Angular Components.

(Pro Nav-Link eine)

Lokal

ng g component swapi/films

Online

1. Rechtsklick auf den src Ordner in der Projekt Section.
2. Klick auf Angular Generator
3. Component auswählen
4. Name films im Promt eingeben und bestätigen
5. Dann den Ordner per mouse drag 'n drop nach src/app/swapi verschieben
6. Komponente im SwapiModule in declarations array eintragen

Routing

1. Neue datei swapi-routing.module.ts unter src/app/swapi anlegen
2. SwapiRputingModule im SwapiModule in dasimports` array eintragen
3. Für jeden Link eine route erstellen.
4. In der app-routing.module.ts redirect auf /films eintragen

5. In der Navigation die href in routerLink="" ändern

   SwapiRoutingModule

swapi-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { FilmsComponent } from './films/films.component';

const routes: Routes = [
  {
    path: 'films',
    component: FilmsComponent,
  },
  {
    path: 'people',
    component: PeopleComponent,
  },
  {
    path: 'planets',
    component: PlanetsComponent,
  },
  {
    path: 'species',
    component: SpeciesComponent,
  },
  {
    path: 'starships',
    component: StarshipsComponent,
  },
  {
    path: 'vehicles',
    component: VehiclesComponent,
  },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class SwapiRoutingModule { }

SwapiModule

## swapi.module.ts ```ts @NgModule({ declarations: [], imports: [ CommonModule, HttpClientModule, SwapiRoutingModule ] }) export class SwapiModule { } ```

AppRoutingModule

## app-routing.module.ts ```ts const routes: Routes = [ { path: '', redirectTo: '/films', pathMatch: 'full', }, ]; ```

TopNav

## top-nav.vomponent.html ```html films ```

[web-dave]

Next