Crear el router para angular 5

Una vez que hayamos creado nuestro proyecto, lo que nos interesa es utilizar el router para comenzar a crear nuestras rutas que utilizaremos dentro de nuestro proyecto.

Para esto crearemos un archivo llamado app.routes.ts al nivel del archivo app.module.ts, y tambien crearemos nuestro primer componente que sera el HOME de nuestro proyecto.

Lo creamos usando el cli de angular:

Esto nos va a crear dentro de la carpeta app una mas llamada components, ahi guardaremos nuestros componentes.

Bueno pues dentro del archivo app.routes.ts le pondremos esto:

Ahora para incorporarlo a nuestro proyecto vamos a registrarlo en los imports dentro del archivo app.module.ts y quedaría asi:

Si te fijas, hemos incorporado el nombre de la variable que exportamos en el archivo de las rutas.

 

Y finalmente para usarlo, vamos a editar el archivo app.component.hmtl y le vamos a poner una sola linea:

De esta forma, hemos activado el router a nuestro proyecto de Angular 5, claro que si queremos darle algo de formato a nuestra SPA.

Podemos utilizar, las clases de bootstrap, pudiéramos tener algo asi:

O quiza agregarle un header o el footer. ya lo dejo a tu elección.

,

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

This site uses Akismet to reduce spam. Learn how your comment data is processed.