DEV Community

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

Posted on • Edited on

Tutorial 3: Configurar rutas en una app de Angular CLI

#angular #kikstart #beginners #espanol

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

Top comments (0)