Angularjs: Añadiendo Jquery y Bootstrap.


Vamos a empezar a ver el desarrollo de nuestra webapp para el frontend del proyecto.

En la sección anterior instalamos las herramientas necesarias, y ahora vamos a empezar a modificar para ir viendo los cambios.

Os recomiendo seguir este curso: https://www.udemy.com/curso-de-angular-4-desde-cero-hasta-profesional/. Yo únicamente iré comentando aquí las cosas que sean específicas para el proyecto que estoy desarrollando en estas entradas.

El primer paso para nuestro proyecto, es asegurarnos de que todas las dependencias están colocadas correctamente. Por si acaso no estuvieran, instalamos jquery y bootstrap en nuestro proyecto, de esta forma:

Despues modificaremos nuestro archivo “angular-cli.json” y añadiremos las siguiente dependencias de css en la sección styles:

En este momento, si ejecutamos un “npm start” el proyecto ya tendrá las dependencias colocadas.

Para comenzar, vamos a implementar una plantilla base de boostrap, para ver que todo está correcto. Así que modificaremos el archivo “app.component.html” para que tenga el siguiente contenido:

Y cambiaremos el archivo “styles.css” que incluye con el siguiente contenido:

Con esto habremos personalizado la base, pero ahora vamos a incluir la barra de navegación de bootstrap. Para ello crearemos un nuevo componente con el comando  ng generate component frontend/nav (la parte “frontend” no es necesario incluirlo para que nos genere el componente, pero yo lo incluyo porque voy a diferenciar los componentes que pertencen a la parte “frontend” o “pública” de la app, y a los componentes de una sección “backend” o de “administración”.

Una vez creado el componente nav, lo incluiremos en la web, modificando el archivo “app.component.html” e incluyendo en el  <app-nav></app-nav> antes de la apertura del div “container”, quedando el archivo de esta forma:

Una vez hecho esto, veremos una frase “nav works!” por encima del contenido que teniamos antes.

En este momento modificaremos el archivo “nav.component.html” para que tenga el siguiente contenido:

Y con esto en el navegador podremos comprobar que se ha añadido la barra de navegación con los estilos de bootstrap.

¡Estamos listos para continuar! y empezar a definir los componentes de la parte pública.