JWT con Spring Boot, MySql y Angular 7. Capítulo 5: crear el FrontEnd

Para utilizar Angular debemos instalar varios programas en el equipo. Hay miles de tutoriales por la web que explican cómo hacerlo, así que no me extenderé mucho.

• Instalar nodejs: para ello vamos a la página oficial y descargamos el instalador (dirección: https://nodejs.org/es/)
• Instalar npm: tecleamos el comando npm install-g npm@latest para instalar la última versión de npm de forma global
• Instalar Angular Cli: tecleamos npm install -g @angular/cli@latest

Una vez que lo tenemos abrimos la consola de comandos y nos situamos en el directorio donde vayamos a guardar el proyecto. Tecleamos:

 ng new angularjwtFRONT --routing

El comando —routing lo utilizamos para que se cree el módulo de rutas y así nos ahorramos generarlo a mano. Ahora toca esperar un rato a que finalice la creación del proyecto

Después de la larga espera nos situamos en el directorio del nuevo proyecto:

 cd angularjwtFRONT

Y lo abrimos con Visual Studio Code

code .

Abrimos una nueva terminal (Ctrl+Mayúsculas+ñ) y lo abrimos en el navegador:

ng serve -o

Se abrirá la página principal en el puerto 4200 de localhost.

Lo siguiente que vamos a hacer es instalar bootstrap

npm install bootstrap

En el archivo angular.json, en styles añadimos la línea de código, justo después de styles.css, tal como se muestra aquí:

	"styles": [
	"src/styles.css",
	"node_modules/bootstrap/dist/css/bootstrap.min.css"
	],

view raw style bootstrap hosted with ❤ by GitHub

Llega el momento de crear los directorios del proyecto. Nos situamos sobre el directorio src >> app, botón derecho y seleccionamos «nueva carpeta».

Vamos a crear las siguientes carpetas: models, services, productos, home, users, admin, auth, guards, interceptors. El proyecto quedará así:

Abrimos el archivo app.component.html y ponemos una barra de navegación de bootstrap. El código de la barra se encuentra en la página oficial de, en la pestaña documentation:

https://getbootstrap.com/docs/4.3/getting-started/introduction/

en el cuadro de búsqueda introducimos la palabra navbar. Lo copiamos (es el primer ejemplo) en app.component.html eliminamos todo excepto la etiqueta router-outlet. Lo pegamos al principio del documento.

Ye modificado varios aspectos del código original de bootstrap:

• El color de fondo es oscuro (dark)
• El margen inferior es de 5 (mb-5)
• Hay que  cambiar href por routerLink
• Se elimina el buscador, el dropdown y se dejan sólo dos enlaces
• El brand se cambia por Angular JWT

El código de app.component.html queda así (y OJO, insisto, no borréis la etiqueta del final de router-outlet):

	<nav class="navbar navbar-expand-lg navbar-dark bg-dark mb-5">
	<a class="navbar-brand" href="#">Angular JWT</a>
	<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
	<span class="navbar-toggler-icon"></span>
	</button>
	<div class="collapse navbar-collapse" id="navbarSupportedContent">
	<ul class="navbar-nav mr-auto">
	<li class="nav-item active">
	<a class="nav-link" routerLink="">Home</a>
	</li>
	<li class="nav-item">
	<a class="nav-link" routerLink="">Link</a>
	</li>
	</ul>
	</div>
	</nav>
	<router-outlet></router-outlet>

view raw navbar dark hosted with ❤ by GitHub

En el navegador se mostrará lo siguiente:

En el próximo artículo comenzaremos con la creación del servicio y de la tabla que muestra los productos de la base de datos.