Cómo arrancar un proyecto Angular 6 utilizando Bootstrap 4

A estas alturas definir Angular o Bootstrap no es necesario, pero si estás empezando en este mundo, esta guía te puede servir para arrancar un proyecto Angular usando como base bootstrap y font-awesome para tu diseño.

Para seguir esta guía es necesario contar con Angular CLI, aunque previamente debemos asegurarnos que tenemos instalado nodejs 8.x y npm 5.x. Para hacernos con  Node, simplemente tenemos que ir a la página de descargas de nodejs, elegir la versión adecuada para nuestro equipo e instalar dicha versión.

*Si queremos comprobar que versiones tenemos instaladas simplemente debemos ejecutar los siguientes comando desde nuestra línea de comandos:

 

Para instalar Angular CLI solo debemos ir a la línea de comandos y ejecutar:

 

Este comando simplemente instalará Angular CLI de manera global. De todas formas si no estamos seguros de si Angular CLI está instalado en nuestra máquina simplemente debemos ejecutar el siguiente comando para asegurarnos:

 

La salida entre otras cosas deberá incluir lo siguiente:

 

Llegados a este punto ya tenemos todo lo necesario para arrancar nuestro proyecto. Crear un proyecto con Angular CLI es muy fácil y tan solo debemos ejecutar los siguiente:

 

donde “angular-bootstrap-template” es el nombre de nuestro proyecto. Este comando creará el proyecto y descargará todos los paquete necesarios. Una vez creado el proyecto haremos lo siguiente:

 

Si todo ha ido bien, al navegar a http://localhost:4200 deberemos ver lo siguiente:

angular_bootstrap_tutorial

 

Ahora llega el turno de instalar bootstrap. Para ello usaremos npm una vez más, así que simplemente ejecutaremos lo siguiente:

 

Luego tendremos que modificar el fichero angular.json, para extender la sección styles que quedará como sigue a continuación.

 

Ya que hemos cambiado el fichero angular.json tendremos que parar el “Live Development Server” y volver a hacer un npm start. Si volvemos a nuestra url de desarrollo (http://localhost:4200) veremos que plantilla inicial ha cambiado un poco, esto es debido a que los estilos de bootstrap ya se están aplicando.

angular-bootstrap-tutorial

 

Bien, ya tenemos instalado bootstrap, ¿fácil no?, pues ahora le toca el turno a font-awesome. Actuaremos de igual forma que con bootstrap, así que, lo instalaremos a través de npm, para ello solo tendremos que ejecutar el siguiente comando:

 

Ojo, que ‘npm install fontawesome’ no instala la versión oficial. También hay que tener en cuenta que se instala versión 4.7.0 (en el momento de escribir esta guía) y no la versión 5.x.

Un vez hecho esto, iremos una vez más al fichero angular.json y extendemos la sección styles, quedando de la siguiente forma:

Una vez más hay que parar el “Live Development Server” y volver a hacer un npm start, pero esta vez habrá que añadir algo al html para poder ver si todo está funcionando como es debido. Como prueba añadiremos la siguiente línea al final del fichero app.component.html

Made with <i class=»fa fa-heart»></i> with bootstrap and font-awesome

Ahora, nuestra plantilla se verá así:

angular-bootstrap-tutorial

Y con esto terminamos nuestro hello world con Angular, bootstrap y font-awesome con el que podremos empezar nuestra app. En la próxima entrada partiendo de esta plantilla haremos un plantilla con unos de los ejemplos que nos da bootstrap.

*Tienes el código fuente de este tutorial en este repositorio github. También, si tienes dudas puedes contactar conmigo a través de github o linkedin.

Por: Sergio Marrero

foto-sergio-moreno

 

 

 

 

 

 

Senior Software Developer en TecAlliance GmbH

Alumnos del Bootcamp Mobile

Si tienes algo que deseas compartir o quieres formar parte de JustCodeIt, escríbenos a [email protected].



Share this:

4 comments, add yours.

Pablo

Gracias!!

rafa salazar

Gracias, me ayudaste mucho! saludos!

angel

(El tutorial no está completo)
No va a funcionar, tienes que cargar también los script (js) de bootstrap.
En caso contrario, muchos de los componentes que usan javascript con bootstrap no funcionarán.
(prueba a usar un dropdown de bootstrap)

Un saludo

Gabriel Amador

Hola! buen ejemplo pero hay varias mejoras que deberías hacer al artículo para que sea de 10 casi:

1º usa npm install –save, el –save es importante! para que se guarde en el package.json

2º Añade también el jquery y el popper.js. Te dejo como ha quedado el archivo angular.json en mi proyecto: https://imgur.com/GwHAvGx

Leave a comment