lunes, julio 26, 2021

Tips Angular: incluyendo bootstrap y jquery en nuestro proyecto

Deberías leer

Antonio García Pratshttp://antoniogarciaprats.eu/
Estudios de Licenciatura en CC Quimicas e Ingeniería Técnica en Informática de Gestión por la Universidad de Jaén. Social Media autodidacta. Siempre en búsqueda de nuevos retos que proporcionen algún sentido a mi existencia.

A la hora de crear nuestro proyecto web en Angular, viene bien tener a mano recursos coo bootstrap y jquery con los que mejorar la interfaz y, por tanto, la experiencia del usuario al visitar nuestro portal.

Quiero compartir con vosotros la forma de incluir bootstrap y jquery, pero antes me gustaría dejar el enlace a una página en la que podemos reutilizar muchísimos recursos más y, por supuesto, de manera gratuita: npmjs.com.

pagina oficial de npmjs en la que encontrar recursos para tu proyecto angularjs
pagina actual de npmjs.com

Desde ésta página encontraremos las instrucciones necesarias para instalar la librería css bootstrap en nuestro proyecto. En la siguiente dirección encontraremos estas directrices que debemos seguir para conseguirlo.

Escribimos, ahora en la terminal de nuestro IDE Visual Code Studio la siguiente línea:

npm install bootstrap

pasados unos minutos finalizará la instalación. Para instalar Jquery, pues prácticamente la misma historia. Desde la terminal de Visual Studio escribiremos la siguiente línea y esperaremos un momento a que se instale:

npm i jquery

Nos percataremos que en el fichero package.json aparecerán ahora dos nuevas entradas correspondientes a bootstrap y jquery.

entradas bootstrap y jquery en el fichero package.json de visual studio code

A continuación abriremos el fichero angular.json y escribiremos las siguientes lineas para incluir las librerias css de bootstrap y js de bootstrap/jquery. Veamos:

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

Terminado esto, ahora tenemos que asegurarnos de que verdaderamente todo funciona como esperamos. Para ello vamos a hacer lo siguiente: buscaremos el archivo app.componet.html y escribiremos en él las siguientes líneas de código en html.

<div class="alert alert-primary">
  HOLA MUNDO
</div>

Es un sencillo alert de bootstrap. si compilamos y lanzamos el proyecto en el navegador, deberá aparecernos una cosa como esta.

comprobando que bootstrap y jquery se han agregado correctamente al proyecto angular

Si es así, entonces hemos hecho un buen trabajo. Ahora ya si que podemos seguir codificando nuestro proyecto.

- Advertisement -spot_img

Más publicaciones

Dejar respuesta

Please enter your comment!
Please enter your name here

- Advertisement -spot_img

Últimas publicaciones