Angularjs: Añadiendo Jquery y Bootstrap.
By ercobo | Published | No hay comentarios
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:
|
1 2 3 |
npm install jquery --save npm install bootstrap --save npm install font-awesome --save |
Despues modificaremos nuestro archivo «angular-cli.json» y añadiremos las siguiente dependencias de css en la sección styles:
|
1 2 3 4 5 |
"styles": [ "../node_modules/bootstrap/dist/css/bootstrap.css", "../node_modules/font-awesome/css/font-awesome.css", "styles.css" ], |
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:
|
1 2 3 4 5 6 |
Angular Styling BootstrapThis tutorial shows how to use Bootstrap and Font Awesome with an app generated by angular-cli. |
Y cambiaremos el archivo «styles.css» que incluye con el siguiente contenido:
|
1 2 3 4 5 6 7 |
body { padding-top: 5rem; } .starter-template { padding: 3rem 1.5rem; text-align: center; } |
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
|
1 2 3 4 5 6 7 |
Angular Styling BootstrapThis tutorial shows how to use Bootstrap and Font Awesome with an app generated by angular-cli. |
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:
|
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 |
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.
