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:
$ node -v $ npm -v
Para instalar Angular CLI solo debemos ir a la línea de comandos y ejecutar:
$ npm install -g @angular/cli
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:
$ ng -v
La salida entre otras cosas deberá incluir lo siguiente:
Angular CLI: 6.0.7 Node: 10.3.0 OS: win32 x64 Angular: ...
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:
$ ng new angular-bootstrap-template
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:
$ cd angular-bootstrap-template $ npm start
Si todo ha ido bien, al navegar a http://localhost:4200 deberemos ver lo siguiente:
Ahora llega el turno de instalar bootstrap. Para ello usaremos npm una vez más, así que simplemente ejecutaremos lo siguiente:
$ npm install bootstrap
Luego tendremos que modificar el fichero angular.json, para extender la sección styles que quedará como sigue a continuación.
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.css"
"src/styles.css"
],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.
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:
$ npm install font-awesome
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:
"styles": [ "node_modules/bootstrap/dist/css/bootstrap.css", "node_modules/font-awesome/css/font-awesome.css", "src/styles.css" ],
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í:
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
Senior Software Developer en TecAlliance GmbH
Alumnos del Bootcamp Mobile
