Tutorial 3: Configurar rutas en una app de Angular CLI

Requisitos

• Haber realizado el tutorial 2, donde creamos nuestro layout.

Paso # 1

Generamos los componentes de home, about y contact y configuramos sus rutas.

1: Crea un nuevo componente llamado home con el siguiente comando:

ng generate component home

2: Crea un nuevo componente llamado about con el siguiente comando:

ng generate component about

3: Crea un nuevo componente contact escribiendo lo siguiente:

ng generate component contact

💡 KikstartTip

Una manera abreviada de crear estos componentes es:
ng g c home

4: Busca la ruta src/app/app-routing.module.ts y agrega lo siguiente en la parte superior.

import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { ContactComponent } from './contact/contact.component';

5: Luego agrega en el array de routes lo siguiente:

const routes: Routes = [
  {
    path: '',
    component: HomeComponent,
  },
  {
    path: 'about',
    component: AboutComponent,
  },
  {
    path: 'contact',
    component: ContactComponent,
  },
];

Paso # 2

Utiliza UiLink para agregar las rutas.

1: Busca la ruta src/app/app.component.ts y agrega lo siguiente en la parte superior.

import { UiLink } from '@kikstart-ui/ui-link';

2: Luego define en el mismo archivo una propiedad links con el tipo UiLink[] dentro de la clase AppComponent.

links: UiLink[] = [
  { label: 'Home', path: '/' },
  { label: 'About', path: '/about' },
  { label: 'Contact', path: '/contact' },
];

3: En tu editor busca la ruta src/app/app.component.html y agrega la propiedad links a la etiqueta <ui-navbar>.

<ui-navbar navbarStyle="dark" [brand]="brand" [links]="links"></ui-navbar>

Paso # 3

Kikstart UI tiene una etiqueta que nos deja agregar un componente hero, lo implementamos para cada uno de nuestros componentes.

1: Busca la ruta src/app/app.module.ts y agrega lo siguiente en la parte superior:

import { UiHeroModule } from "@kikstart-ui/ui-hero";

2: Luego agrega UiHeroModule en el array imports de @NgModule.

...
imports: [
  BrowserModule,
  AppRoutingModule,
  LayoutWebModule,
  UiNavbarModule,
  UiHeroModule,
],
...

3: Busca la ruta src/app/home/home.component.html y modifica el template colocando lo siguiente:

  <ui-hero title="Home"></ui-hero>

📖 Kikstartpedia

Repite el punto 3 para el resto de los componentes about y contact.

Resumen

En este tutorial creamos 3 componentes,importamos y agregamos estos componentes en el routing y finalmente para visualizar nuestras rutas configuramos los links además de utilizar el ui-hero para cambiar cómo se renderizan las paginas.

El repositorio con este paso lo puedes encontrar aquí.