# 📬Intermedio #1 - Enrutamiento 📬

## 💡 Introducción 💡

En este desafío haremos algo divertido aplicando el concepto de enrutamiento, en cada uno de los pasos iremos abordando algunos conceptos de Angular, y crearemos nuestra nueva aplicación, que para este desafío haremos nuestra página personal o portafolio 😉.

**¡**[**Aquí puedes encontrar el demo**](https://routing-challenge1.stackblitz.io)**!**

¿Estás list@?

**¡¡¡Es hora de la Acción!!! 😝**

## Paso 1: **Creemos nuestra App de Angular** ⭐️

Primero iremos a el inicio de [**www.stackblitz.com**](https://stackblitz.com) y crearemos una App de Angular.

![Vamos al inicio de Stackblitz y damos click en el botón.](https://3418570209-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW1Rd6Lo-WMisT20MSI%2F-Lfm1buzeVgzyc9sla4K%2F-LfmF2EIn_D3rx1gxAJJ%2FScreen%20Shot%202019-05-25%20at%2010.41.44%20PM.png?alt=media\&token=eff358e9-e6bb-4a39-a072-8de632c75ac2)

![Seleccionamos la opción de Angular](https://3418570209-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW1Rd6Lo-WMisT20MSI%2F-Lfm1buzeVgzyc9sla4K%2F-LfmFnfwUkx_kYXbVEwL%2FScreen%20Shot%202019-05-25%20at%2010.48.40%20PM.png?alt=media\&token=3050fc43-1746-4a98-993d-94c250b1a2a3)

![Verás algo como esto 👆](https://3418570209-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW1Rd6Lo-WMisT20MSI%2F-Lfm1buzeVgzyc9sla4K%2F-LfmGCMN4j_IokU0vzTP%2FScreen%20Shot%202019-05-25%20at%2010.52.23%20PM.png?alt=media\&token=b9630837-c8a0-4388-93a5-0474b2f6f7e5)

En la parte izquierda donde dice "Files", seleccionaremos el archivo llamado **app.component.html**. 

Dentro del archivo seleccionamos su texto, lo borramos (presionando la tecla delete de tu compu 💻) y guardamos los cambios, seleccionando en la parte superior la opción de '**Save**' 💾 o la tecla rápida **cmd** + **S** o en windows **Ctrl** + **S.** 

![](https://3418570209-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW1Rd6Lo-WMisT20MSI%2F-Lfm1buzeVgzyc9sla4K%2F-LfmHJVm7_7cFa8fmSA3%2FWebp.net-gifmaker%20\(1\).gif?alt=media\&token=8924bfbd-4c41-4857-b397-9e9f32e455de)

## Paso 2: **Añadamos un título** 🏁

En el mismo archivo **app.component.html,** vamos a usar unas etiquetas o tags de **HTML** para poner un título.

Copiaremos lo siguiente en el archivo **app.component.html** 

{% tabs %}
{% tab title="app.component.html" %}

```markup
<h1>My App 😉</h1>
```

{% endtab %}
{% endtabs %}

![Añadiendo el título](https://3418570209-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW1Rd6Lo-WMisT20MSI%2F-Lsn-HUkRnyOKDZcFMVY%2F-Lsn2tgCvp9BaFeryps0%2FScreen%20Shot%202019-11-03%20at%203.57.50%20PM.png?alt=media\&token=55682956-309d-40ed-b8ef-8c594a029c41)

Este paso es muy sencillo y ya lo hemos realizado en pasos anteriores, entonces le pondremos una clase a nuestro título y algo de estilos e incluso podemos incluirle una tipografía a nuestra aplicación.

Para la fuente puedes usar cualquier tipografía de google como la siguiente e importarla en el archivo styles.css y aplicar la fuente a todos los elementos, así:

{% tabs %}
{% tab title="styles.css" %}

```css
/* Add application styles & imports to this file! */
@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
* {
  font-family: 'Open Sans', sans-serif;
}
```

{% endtab %}
{% endtabs %}

O puedes usar alguna otra del catálogo:

<https://fonts.google.com/>

A nuestro título, lo pondremos dentro de la etiqueta header y le añadiremos un atributo clase. Como este es el nivel intermedio y ya sabes como poner algunos elementos, entonces no te mostraremos como poner la etiqueta o el color en el paso a paso.

## &#x20;Paso 3: Crearemos varios componentes 💪

Angular está compuesto por varios **componentes**. En nuestra aplicación base existe un componente **App**, en él hemos estado añadiendo las diferentes instrucciones de los diferentes desafíos.

Cuando visitas una página web, puedes observar que ella tiene muchas secciones como información de una empresa/producto, detalles de servicios, información de contacto entre otras. En este paso crearemos varios componentes, que serán donde iremos a colocar cada una de las secciones de nuestra página.

Dando clic derecho sobre la carpeta App, se desplegará un menú, en el seleccionaremos la opción **Angular Generator** y luego seleccionamos componente.

![Creando un componente](https://3418570209-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW1Rd6Lo-WMisT20MSI%2F-Lsn6CrqO6qfQ0CFKutn%2F-Lsn9WbrHOdYyug15YZO%2FScreen%20Shot%202019-11-03%20at%204.24.32%20PM.png?alt=media\&token=b0b08af3-24f6-4ef4-a803-ddfae69464f2)

Nos aparece un campo de texto donde colocaremos el nombre para nuestro componente.

![Incluimos el nombre de nuestro componente](https://3418570209-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW1Rd6Lo-WMisT20MSI%2F-Lsn6CrqO6qfQ0CFKutn%2F-LsnAGa4gc6RjEBKCHnm%2FScreen%20Shot%202019-11-03%20at%204.29.06%20PM.png?alt=media\&token=48ace083-a0cf-4f6b-a86a-989dde8a805b)

Le colocaremos el nombre home y presionamos enter y se nos creará nuestro nuevo componente.

![Componente Home](https://3418570209-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW1Rd6Lo-WMisT20MSI%2F-Lsn6CrqO6qfQ0CFKutn%2F-LsnAw_tMOmHRwBJ6ZYy%2FScreen%20Shot%202019-11-03%20at%204.32.56%20PM.png?alt=media\&token=754b2720-6b9d-4654-89a2-574ced7681e6)

Repetiremos el mismo paso para la creación del componente para crear otros 3 nuevos componentes, los llamaremos about, skills y contact.

Nuestra carpeta app, lucirá así:

![Nuestros nuevos componentes](https://3418570209-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW1Rd6Lo-WMisT20MSI%2F-Lsn6CrqO6qfQ0CFKutn%2F-LsnBx9kbfJYEsONEO3s%2FScreen%20Shot%202019-11-03%20at%204.37.20%20PM.png?alt=media\&token=6bddf6de-753c-4c01-96d8-467e87239f42)

## Paso 4: Añadiendo un Menu 📋

Añadamos un componente para crear nuestro menú en él.

Entonces seguimos los pasos anteriores y crearemos nuestro componente menú.

![Componente Menu](https://3418570209-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW1Rd6Lo-WMisT20MSI%2F-Lsn_-1fSdVPJrG31_qW%2F-Lsn_kDnJvm5GCenXfR_%2FScreen%20Shot%202019-11-03%20at%206.25.42%20PM.png?alt=media\&token=8bd40658-2748-4c72-8e64-fa5ac228a885)

En el archivo **menu.component.html** vamos a poner la etiqueta \<nav> donde pondremos cada uno de los links que nos llevarán a cada componente. Esos links los pondremos en una lista.

![Lista de links](https://3418570209-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW1Rd6Lo-WMisT20MSI%2F-Lsn_-1fSdVPJrG31_qW%2F-LsneFNOFPjmllJzP-uk%2Fezgif.com-gif-maker%20\(12\).gif?alt=media\&token=d8b8e5a2-5ff9-45d6-b604-095ee9c8f114)

Nuestra lista se verá parecida al siguiente código, pero en la vista o **HTML** aún  no veremos nuestra lista hasta que la incluyamos en nuestro componente  App.&#x20;

{% tabs %}
{% tab title="menu.component.html" %}

```markup
<nav>
  <ul>
    <li><a>About</a></li>
    <li><a>Skills</a></li>
    <li><a>Contact</a></li>
  </ul>
</nav>
```

{% endtab %}
{% endtabs %}

En el archivo **app.component.ts** existe una línea donde encuentras el '**selector**' y ese es el que se debe añadir en el **app.component.html**

Copia el selector y añádelo como etiqueta en la vista del componente App.

![Añadiendo el menu en el App ](https://3418570209-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW1Rd6Lo-WMisT20MSI%2F-Lsn_-1fSdVPJrG31_qW%2F-LsnhgOW-f1_Lff6Xclj%2Fezgif.com-gif-maker%20\(13\).gif?alt=media\&token=8cdf38e0-9ec9-4cb5-a00f-26b526e37ef4)

Ahora debemos unir cada uno de los links a los respectivos componentes.

## Paso 5: Uniendo los componentes a sus links 🕹️

Vamos a crear un módulo para controlar todas nuestras rutas.

En la carpeta **app**, vamos a dar clic derecho y en la opción Angular Generator, seleccionaremos Module

![Modulo Routing](https://3418570209-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW1Rd6Lo-WMisT20MSI%2F-Lsnkk3t3hIbCWQJEwxf%2F-LsnnM0v9Q0gwFzqoLA-%2Fezgif.com-gif-maker%20\(14\).gif?alt=media\&token=253a9cf8-8a6f-42b8-bb23-674b4a6ccc17)

En nuestro nuevo archivo vamos a incluir las rutas y para ello debemos importar el RouterModule e incluir en los import la colección de nuestras rutas.

* Incluimos el import

```typescript
import { RouterModule } from '@angular/router';
```

* En los import colocaremos la colección usando el forRoot.

```typescript
RouterModule.forRoot([
      { path: 'about', component: AboutComponent },
      { path: 'contact', component: ContactComponent },
      { path: 'home', component: HomeComponent },
      { path: 'skills', component: SkillsComponent },
      { path: '**', redirectTo: 'home' }
    ])
```

* Debemos también importar los componentes que estamos mencionando en la colección de rutas, para que no salga error en nuestra aplicación.

```typescript
import { AboutComponent } from '../about/about.component';
import { ContactComponent } from '../contact/contact.component';
import { HomeComponent } from '../home/home.component';
import { SkillsComponent } from '../skills/skills.component';
```

* Debemos incluir también nuestros componentes en los declarations.

```typescript
declarations: [ AboutComponent, ContactComponent, HomeComponent, SkillsComponent]
```

![Routing Module](https://3418570209-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW1Rd6Lo-WMisT20MSI%2F-Lsnkk3t3hIbCWQJEwxf%2F-LsoBG3WbkuIpSrf4UIP%2FScreen%20Shot%202019-11-03%20at%209.14.00%20PM.png?alt=media\&token=ff390e60-08f5-4da2-bdfd-72ace1bcc65a)

También podemos crear una variable donde almacenemos la colección de nuestras rutas y la pondremos en nuestro forRoot, pero esta es solo otra alternativa.

{% tabs %}
{% tab title="routing.module.ts" %}

```typescript
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { AboutComponent } from '../about/about.component';
import { ContactComponent } from '../contact/contact.component';
import { HomeComponent } from '../home/home.component';
import { SkillsComponent } from '../skills/skills.component';

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forRoot([
      { path: 'about', component: AboutComponent },
      { path: 'contact', component: ContactComponent },
      { path: 'home', component: HomeComponent },
      { path: 'skills', component: SkillsComponent },
      { path: '**', redirectTo: 'home' }
    ])
  ],
  declarations: [ AboutComponent, ContactComponent, HomeComponent, SkillsComponent]
}) 
export class RoutingModule { }
```

{% endtab %}
{% endtabs %}

* Aún no hemos incluido el archivo routing.module en nuestro app, para esto en el archivo **app.module.ts**, importamos nuestro archivo **routing.module.ts**

{% tabs %}
{% tab title="app.module.ts" %}

```typescript
import { RoutingModule } from './routing/routing.module';
```

{% endtab %}
{% endtabs %}

Incluimos en la colección de imports nuestro '**RoutingModule**'

```typescript
imports:      [ BrowserModule, FormsModule, RoutingModule ],
```

En nuestro **app.module.ts** aparecen importados los componentes que ya incluimos en el **routing.module.ts**, entonces lo que haremos es borrar los que ya están en el routing. Nuestro **app.module.ts** quedará así:

{% tabs %}
{% tab title="app.module.ts" %}

```typescript
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { MenuComponent } from './menu/menu.component';

import { RoutingModule } from './routing/routing.module';

@NgModule({
  imports:      [ BrowserModule, FormsModule, RoutingModule ],
  declarations: [ AppComponent, MenuComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

```

{% endtab %}
{% endtabs %}

* Nos falta incluir estas rutas que creamos de nuestros componentes en el menú que incluimos y usar la etiqueta \<router-outlet> que nos ayudará a mostrar el contenido de nuestros componentes

En nuestro **app.component.html** vamos a incluir nuestra etiqueta \<router-outlet> \</router-outlet>, dentro de estas etiquetas se va a mostrar todo el contenido de nuestros componentes.

{% tabs %}
{% tab title="app.component.html" %}

```markup
<header class="header">
  <h1>My App 😉</h1>
</header>
<app-menu></app-menu>
<router-outlet></router-outlet>
```

{% endtab %}
{% endtabs %}

Al incluir nuestra etiqueta saldrá un error parecido al siguiente y es porque nos falta exportar nuestro módulo de Routing, y para esto es solo que incluyamos el export, en nuestro NgModule, en el **routing.module.ts** así:

{% tabs %}
{% tab title="routing.module.ts" %}

```typescript

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forRoot([
      { path: 'about', component: AboutComponent },
      { path: 'contact', component: ContactComponent },
      { path: 'home', component: HomeComponent },
      { path: 'skills', component: SkillsComponent },
      { path: '**', redirectTo: 'home' }
    ])
  ],
  declarations: [ AboutComponent, ContactComponent, HomeComponent, SkillsComponent],
  exports: [
    RouterModule,
  ]
}) 

```

{% endtab %}
{% endtabs %}

* Solo falta incluir en nuestros links la ruta de nuestros componentes y para ello vamos a hacer uso de unos atributos que tiene el enrutamiento o Routing, llamados **routerLinkActive** y **routerLink**. En cada uno de nuestros links incluiremos que nuestro link esta activo y le pondremos en el routerLink el path que asignamos en el RouterModule. En el archivo **menu.component.html** añadiremos lo mencionado.

{% tabs %}
{% tab title="menu.component.html" %}

```markup
<nav>
  <ul>
    <li><a routerLinkActive="active" 
      routerLink="/home">Home</a></li>
    <li><a routerLinkActive="active" 
      routerLink="/about">About</a></li>
    <li><a routerLinkActive="active" 
      routerLink="/skills">Skills</a></li>
    <li><a routerLinkActive="active" 
      routerLink="/contact">Contact</a></li>
  </ul>
</nav>
```

{% endtab %}
{% endtabs %}

![Menu completado exitosamente](https://3418570209-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW1Rd6Lo-WMisT20MSI%2F-LsoF7ZT1yaOqAJz9szs%2F-LsoLfYs67QbDflaaLXL%2FScreen%20Shot%202019-11-03%20at%209.59.31%20PM.png?alt=media\&token=f6cc5ca8-43c5-48cd-a09f-27629ab44225)

Si damos clic en cada uno de los links podremos ver el contenido de cada componente.

![Probando los links](https://3418570209-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW1Rd6Lo-WMisT20MSI%2F-LsoF7ZT1yaOqAJz9szs%2F-LsoMRWZ4RXoRKjmYafl%2Fezgif.com-gif-maker%20\(15\).gif?alt=media\&token=63509768-23cb-43f7-90f2-7fd3f9f35c3d)

Como puedes notar no hay mucho contenido en nuestros componentes, entonces podemos incluir alguno de contenido en ellos.&#x20;

## Paso 6: Añadamos algo de contenido 🤡

En nuestro componente home, podemos incluir algo de texto introductorio a nuestra aplicación, esta aplicación es como tu portafolio. Entonces incluye un texto para darle la bienvenida a tu visitante y algo de contexto de la página. En nuestro **home.component.html** colocaremos las etiquetas y el texto.

{% tabs %}
{% tab title="home.component.html" %}

```markup
<section>
  <p>Bienvenidos!!</p>
  <p>
  Esta es mi página y en ella incluire mi portafolio, el cual estan todos invitados a conocer.
  </p>
</section>
```

{% endtab %}
{% endtabs %}

En el component about, **about.component.html**,  podemos colocar un título.

{% tabs %}
{% tab title="about.component.html" %}

```markup
<section>
  <header>
    <h1>Sobre Mí</h1>
  </header>
</section>
```

{% endtab %}
{% endtabs %}

Nuestro portafolio se verá así:

![portafolio en proceso](https://3418570209-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LW1Rd6Lo-WMisT20MSI%2F-LsoF7ZT1yaOqAJz9szs%2F-LsoQR-Yob0zZZ2A2Ekl%2Fezgif.com-gif-maker%20\(15\).gif?alt=media\&token=169b54a0-0f25-4343-b17c-877f2ca45a1f)

¡Sí has llegado hasta aquí!, ¡¡¡Felicitaciones!!!&#x20;

Estas a un paso de completar este desafío, solo te falta realizar la misión especial 👍

😉

{% hint style="info" %}
[**Aquí**](https://stackblitz.com/edit/routing-challenge1) puedes encontrar el ejercicio resuelto.
{% endhint %}

## 😎 Tu Misión Especial 😎

Parece que nuestra aplicación está casi lista 😀.&#x20;

👍 Para completarla debes añadir contenido en los componentes restantes, recuerda que estás construyendo tu portafolio, entonces añade información sobre ti en cada componente y si necesitas ayuda con los estilos o añadiendo el contenido nos puedes pedir ayuda 👍

{% hint style="success" %}
Has completado el **desafío #2 de nivel básico**, ahora vamos al **desafío Intermedio #2 👇**
{% endhint %}

{% hint style="info" %}
**Nota:**

Si necesitas mentoría con este ejercicio puedes contactar a:

Vanessa M. Aristizabal\
Twitter: @vanessamarely\
Correo: <vanessamarely@gmail.com>
{% endhint %}