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

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more →

Top comments (0)

nextjs tutorial video

Youtube Tutorial Series 📺

So you built a Next.js app, but you need a clear view of the entire operation flow to be able to identify performance bottlenecks before you launch. But how do you get started? Get the essentials on tracing for Next.js from @nikolovlazar in this video series 👀

Watch the Youtube series