Una de las funcionalidades básicas de cualquier aplicación es poder incorporar librerías externas, para no tener que andar reinventando la rueda. En el ecosistema de Intternet existen gran cantidad de librerías que podemos usar para nuestros trabajos de frontend. Evidentemente Angular 5 no tendría ningún sentido si no pudiéramos incorporar librerías externas de otros fabricantes.
Por supuesto, siempre recurriremos a librerías, digámoslo así, «serias», es decir, respaldadas por fabricantes de primera línea o por un amplio sector de la comunidad de desarrolladores. Y esto, por una buena razón. No tiene sentido que usemos una librería que no tiene apoyo, que no está documentada, o cuyo autor puede dejar de dar soporte en cualquier momento. Eso podría afectar a la mantenibilidad de nuestr aplicación en el tiempo.
Al margen de la consideración anterior (que, por otro lado es de cajón), Angular nos permite incluir (y usar en nuestra aplicación) cualquier librería CSS o JavaScript del mercado.
PREPARANDO EL ESCENARIO
En este artículo vamos a instalar Bootstrap y, para poder usar el JavaScript que incorpora, instalaremos también jQuery. Si bien en este artículo sólo vamos a mostrar un uso de ejemplo de los CSS de Bootstrap, dejaremos ya la aplicación preparada para cuando necesitemos el JavaScript. Además, así ya tendremos jQuery disponible, si nos hace falta para algún otro uso.
ATENCIÓN. Supongo que, a estas alturas, no hace falta que te lo recuerde, pero voy a hacerlo de todos modos. El nombre del framework CSS Bootstrap no tiene nada que ver con la propiedad bootstrap que aparece en la envolvente de los módulos, como es el caso de app.module.ts . Que ambos se llamen así es una mera coincidencia. |
Para instalar jQuery, desde la terminal de VSC, y dentro del directorio de nuestra aplicación, tecleamos lo siguiente:
npm install jquery --save
Si quisiéramos instalarlo como dependencia de desarrollo la instrucción que teclearíamos sería:
npm install jquery --save-dev
Sin embargo, dado que estamos instalando una librería cuyas funcionalidades deben estar operativas, también, cuando despleguemos la aplicación para el cliente, no haremos esto último, sino que usaremos la primera instrucción, a fin que que jQuery esté disponible para desarrollo y producción. De hecho, en el contexto de un framework para desarrollo frontend, como es Angular, serán raras las ocassiones en que necesitemos librerías de terceros exclusivamente para desarrollo.
El siguiente paso es instalar Bootstrap. Lo haremos con la siguiente instrucción:
npm install bootstrap --save
Observarás que tu fichero package.json
ha cambiado, para incluir la referencia a estas dos librerías. Su contenido queda ahora así:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
{ "name": "angular01", "version": "0.0.0", "license": "MIT", "scripts": { "ng": "ng", "start": "ng serve --aot -o", "build": "ng build --prod", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "private": true, "dependencies": { "@angular/animations": "^5.2.0", "@angular/common": "^5.2.0", "@angular/compiler": "^5.2.0", "@angular/core": "^5.2.0", "@angular/forms": "^5.2.0", "@angular/http": "^5.2.0", "@angular/platform-browser": "^5.2.0", "@angular/platform-browser-dynamic": "^5.2.0", "@angular/router": "^5.2.0", "bootstrap": "^4.1.1", "core-js": "^2.4.1", "jquery": "^3.3.1", "rxjs": "^5.5.6", "zone.js": "^0.8.19" }, "devDependencies": { "@angular/cli": "~1.7.4", "@angular/compiler-cli": "^5.2.0", "@angular/language-service": "^5.2.0", "@types/jasmine": "~2.8.3", "@types/jasminewd2": "~2.0.2", "@types/node": "^6.0.108", "codelyzer": "^4.0.1", "jasmine-core": "~2.8.0", "jasmine-spec-reporter": "~4.2.1", "karma": "~2.0.0", "karma-chrome-launcher": "~2.2.0", "karma-coverage-istanbul-reporter": "^1.2.1", "karma-jasmine": "~1.1.0", "karma-jasmine-html-reporter": "^0.2.2", "protractor": "~5.1.2", "ts-node": "~4.1.0", "tslint": "~5.9.1", "typescript": "~2.5.3" } } |
Observa en las líneas resaltadas como aparecen los nombres de las dos librerías que acabamos de instalar.
Ahora ya tenemos las dos librerías disponibles, incorporadas a nuestra aplicación Angular. Sin embargo, aún tenemos que decirle al CLI dónde están ubicadas, para que pueda hacer uso de ellas. Ya hemos hablado anteriormente de esto, pero vamos a repetirlo, porque es un paso importante, y nos ayudará a interiorizarlo. Las librerías externas se incluyen en la carpeta node_modules
, ya que han sido instaladas con npm
. No obstante, el CLI, por defecto, no «sabe» donde debe buscarlas. Tenemos que decírselo en el fichero .angular-cli.json
. En primer lugar, tenemos que añadir una referencia a los estilos CSS de Bootstrap. Para ello, tenemos que modificar la propiedad styles
, cuyo aspecto original es el siguiente:
1 2 3 |
"styles": [ "styles.css" ], |
Debe quedar modificada así:
1 2 3 4 |
"styles": [ "../node_modules/bootstrap/dist/css/bootstrap.min.css", "styles.css" ], |
En este caso, hemos referenciado los estilos básicos de Bootstrap. Como esta librería incluye otros archivos de estilos, tales como temas, si queremos usarlos también en nuestra aplicación, deberemos referenciarlos también en la propiedad styles
que, como ves, es una matriz.
Ahora vamos a referenciar jQuery, y el JavaScript de Bootstrap. Para ello buscamos la propiedad scripts
, cuyo contenido por defecto es una matriz vacía, así:
1 |
"scripts": [], |
Nosotros referenciaremos ambos contenidos JAvaScript, así:
1 2 3 4 |
"scripts": [ "../node_modules/jquery/dist/jquery.min.js", "../node_modules/bootstrap/dist/js/bootstrap.min.js" ], |
Y ya está. Ya tenemos las librerías disponibles para toda nuestra aplicación Angular.
TOMANDO ATAJOS
El proceso anterior es conceptualmente muy simple y rápido, y nos permite integrar las librerías en nuestro proyecto. Hay otra manera más simple de hacerlo, que es integrándolas por CDN en el archivo index.html
. Te quedaría así:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Angular01</title> <base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="favicon.ico"> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> </head> <body> <a01-root></a01-root> </body> </html> |
ATENCIÓN. Esta forma de incorporar librerías externas parece (y lo es) más simple y menos laboriosa que la primera que te he enseñado. No requiere de instalaciones con npm , ni modificar el .angular-cli.json , lo que parece que nos ahorra tiempo y trabajo. Sin embargo, para ser honestos, debo desaconsejártela encarecidamente, por las siguientes razones:
|
INTEGRANDO LIBRERÍAS PERSONALIZADAS
En ocasiones tienes que incorporar a tu aplicación Angular una librería externa que descargues con características personalizadas. Vamos a ver un ejemplo muy claro de esto. Supongamos que, en tu aplicación Angular, quieres usar Bootsrap 3, en lugar de Bootstrap 4. Esto no es ninguna tontería. Existe todavía muchísimo código pensado para Bootstrap 3, muchos desarrolladores que no necesitan la versión 4 y emplean aún la 3 y, de hecho, el fabricante (Twitter, para más señas) sigue dándole soporte en su página oficial (al margen de que, ya hablaremos de ello, en Angular 5 deberíamos pensar más en bootstrap 3 que en la versión 4; como te digo, ya hablaremos de esto). En esta versión tienes una página para configurar Bootstrap cómo tú desees descargarlo, en https://getbootstrap.com/docs/3.3/customize/. Si descargas una versión personalizada, no puedes instalarla por CDN en el index.html
, ni tampoco directamente con npm
. Tienes que instalarla «a mano». La forma de hacerlo es la siguiente:
- Entras en la página que te he indicado, y personalizas tódos los detalles de tu Bootstrap. Después lo descargas con el botón Compile and Download que hay en la parte inferior de la página referida.
- En la carpeta
node_modules
de tu proyecto Angular creas un directorio llamadobootstrap
y, dentro de este, otro llamadodist
. Extraes el contenido del comprimido que te has descargado, y lo copias ennode_modules/bootstrap/dist/
. - Referencias Bootstrap en
package.json
(tienes que hacerlo editando el fichero a mano, puesto que no has usadonpm
), incluyendobootstrap
, como hemos visto que nos quedaba en el primer apartado de este artículo. - Referencias bootstrap en
.angular-cli.json
, tal como hemos visto anteriormente. Esto es algo que, de todos modos, también tienes que hacer editando manualmente el fichero.
Y ya está. Ya tienes tu versión personalizada en tu proyecto Angular.
USANDO LAS LIBRERÍAS EXTERNAS
Supongo que, hayas elegido el método que desees, querras ver el resultado. Queremos ver que podemos usar las librerías externas en nuestro proyecto Angular. Como ejemplo de uso vamos a modificar la cabecera de nuestras vistas (el componente HeaderComponent
que aprendimos a crear en este artículo), de forma que se cree la cabecera usando el Jumbotron de Bootstrap (si no sabes lo que es el Jumbotron, es una clase específica que te permite crear un área con todo el ancho de la página, para el contenido de la cabecera; tienes un ejemplo en https://getbootstrap.com/docs/4.1/examples/jumbotron/). Nosotros vamos a crear un jumbotron personalizado, muy simple, pero que nos permitirá ver como Bootstrap está actuando en nuestro proyecto.
- En primer lugar, vamos a editar el archivo principal de estilos del proyecto Angular (
src/styles.css
) para dejarlo vacío, como se crea por defecto. Eliminamos así cualquier contenido que hayamos grabado en este archivo en el artículo anterior. - Modificamos el código de
header.component.css
, simplificándolo mucho. Unicamente vamos establecer un color azul para el fondo de la cabecera (para sustituir el gris pálido que tiene el Jumbotron por defecto), y mantenemos el color rojo oscuro del rótuloh1
, así:
1 2 3 4 5 6 7 |
header { background-color: #00b4b3; } h1 { color: #840101; } |
- Editamos el archivo
header.component.html
añadiéndole, a la etiqueta<header>
la clasejumbotron
, así:
1 2 3 |
<header class="jumbotron"> <h1>Cabecera de la aplicación</h1> </header> |
- Modificamos el archivo
app.component.html
que, como ya sabes, es el que crea el contenido de la vista que tenemos de momento. Lo que hacemos es modificar el rótuloh1
para añadirle la clasecontainer-fluid
de Bootstrap, así:
1 2 3 4 5 6 7 |
<a01-header></a01-header> <h1 class="container-fluid"> Página principal de la aplicación </h1> <router-outlet></router-outlet> |
Y ya está. Inicializa tu servidor (npm start
), y verás que la página se carga ahora con un aspecto que nos dice que la cabecera está usando el Jumbotron de Bootstrap, y la tipografía también es la que incluye Bootstrap, en lugar de la que emplea el navegador por defecto. Todo esto nos dice que Bootstrap ha quedado perfectamente integrado en nuesto proyecto Angular.
CONCLUYENDO
En este artículo hemos aprendido a integrar librerías externas en nuestro proyecto Angular. Por supuesto, apenas le hemso dado un uso mínimo a una de ellas, porque era de lo que se trataba, de ver que se pueden incorporar y que funcionan. Esto nos vendrá bien a la hora de hacer más cosas con la aplicación. Espero verte en el siguiente artículo, y seguir compartiendo esto contigo. Por ahora, puedes descargarte la aplicación, en su estado actual, en este enlace.
MUCHA ATENCIÓN. Como te he comentado anteriormente, las librerías externas se graban en la carpeta node_modules . Esta no está incluida en el comprimido que te descargas. Esto quiere decir que el fichero package.json , y el fichero .angular-cli.json están referenciando librerías externas que tú no tienes, por lo que no podrás compilar ni arrancar este proyecto Angular. La solución es fácil. Como las librerías externas están ya correctamente referenciadas, aunque no las tengas físicamente, teclea, en la consola de tu VSC el mandato siguiente:
Al cabo de unos minutos, todas las librerías externas referenciadas se habrán descargado e instalado, y ya puedes usar |