Tutorial 3: Configurar rutas en una app de Angular CLI
Tags: angular, kikstart, beginners, espanol
Published: 2020-07-15 21:57:56

---
title: "Tutorial 3: Configurar rutas en una app de Angular CLI"
description: "Crear y configurar rutas"
published: true
series: "Introducción a Kikstart UI"
cover_image: "https://dev-to-uploads.s3.amazonaws.com/i/c60ri1xnyuhzrqt7wm2i.png"
// canonical_url: ""
tags: angular, kikstart, beginner, 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:

```bash
ng generate component home
```
2: Crea un nuevo componente llamado `about` con el siguiente comando:
    
```bash
ng generate component about
```
3: Crea un nuevo componente `contact` escribiendo lo siguiente:

```bash
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.

```typescript
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:

```typescript
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.

```typescript
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`.


```typescript
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>`.

```html
<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:

```typescript
import { UiHeroModule } from "@kikstart-ui/ui-hero";
```
2: Luego agrega `UiHeroModule` en el array imports de `@NgModule`.

```typescript
...
imports: [
  BrowserModule,
  AppRoutingModule,
  LayoutWebModule,
  UiNavbarModule,
  UiHeroModule,
],
...
```
3: Busca la ruta `src/app/home/home.component.html` y modifica el template colocando lo siguiente:

 ```html
  <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í](https://github.com/KikstartDev/introduccion-a-kikstart-ui/tree/tutorial-3).