DEV Community

Cover image for Tutorial 3: Configurar rutas en una app de Angular CLI
Derlys for kikstart.dev

Posted on • Edited on

2 3

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
Enter fullscreen mode Exit fullscreen mode

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

ng generate component about
Enter fullscreen mode Exit fullscreen mode

3: Crea un nuevo componente contact escribiendo lo siguiente:

ng generate component contact
Enter fullscreen mode Exit fullscreen mode

💡 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';
Enter fullscreen mode Exit fullscreen mode

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

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

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';
Enter fullscreen mode Exit fullscreen mode

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' },
];
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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";
Enter fullscreen mode Exit fullscreen mode

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

...
imports: [
  BrowserModule,
  AppRoutingModule,
  LayoutWebModule,
  UiNavbarModule,
  UiHeroModule,
],
...
Enter fullscreen mode Exit fullscreen mode

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

  <ui-hero title="Home"></ui-hero>
Enter fullscreen mode Exit fullscreen mode

📖 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í.

Billboard image

Synthetic monitoring. Built for developers.

Join Vercel, Render, and thousands of other teams that trust Checkly to streamline monitor creation and configuration with Monitoring as Code.

Start Monitoring

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay