Integración de Bower Más videos
Descripción del tema
Hasta este momento hemos estado utilizando los CDNs para importar algunas librerías en nuestro proyecto, en este tema veremos como integrar Bower a nuestro entorno de desarrollo para poder descargar dependencias de manera automática.
Anteriormente he publicado un tutorial donde muestro como instalar Bower, te recomiendo revisarlo si es que aún no cuentas con esta herramienta.
Lo primero que haremos será inicializar nuestro proyecto, para eso necesitamos ejecutar el siguiente comando en el directorio raíz del proyecto.
$ bower init
Bower nos hará varias preguntas para poder generar el archivo bower.json con la información correcta, asegúrate de poner una descripción, versión, etc. Una vez que hemos respondido las preguntas tendremos un archivo bower.json con el siguiente contenido.
{
"name": "Bookmarks",
"version": "0.1.0",
"homepage": "https://github.com/crysfel/IntroduccionAngularJS",
"authors": [
"Crysfel Villa <crysfel@bleext.com>"
],
"license": "MIT",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
]
}
Lo siguiente es definir las dependencias que actualmente estamos utilizando, en el archivo bower.json agregamos el siguiente objeto.
{
//...
"dependencies" : {
"jquery" : "2.1.1",
"angular":"1.3.15",
"angular-resource":"1.3.15",
"bootstrap":"3.2.0",
"bootstrap-select":"1.6.4"
}
}
Dentro del objeto dependencies estamos agregando la lista de dependencias que requerimos para este proyecto, cada propiedad representa la librería a importar seguido de la versión que necesitamos.
Una vez que hemos definido las dependencias estamos listos para descargarlos a nuestro proyecto, para eso simplemente ejecutamos el siguiente comando.
$ bower install
Y automáticamente Bower se encargará de descargar todas nuestras dependencias, ahora podremos ver que se ha creado un nuevo directorio llamado bower_components, aquí es donde están todas nuestras dependencias.
Integración con Angular
Ahora lo único que falta es llamar desde el index.html las librerías desde el directorio local donde bower las ha descargado.
<!DOCTYPE html>
<html ng-app="Bookmarks">
<head>
//...
<!-- build:css css/app.min.css -->
<link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="../bower_components/bootstrap-select/dist/css/bootstrap-select.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- /build -->
</head>
<body ng-controller="MainController">
//...
<!-- build:js js/app.min.js -->
<script type="text/javascript" src="../bower_components/jquery/dist/jquery.js"></script>
<script type="text/javascript" src="../bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script type="text/javascript" src="../bower_components/angular/angular.js"></script>
<script type="text/javascript" src="../bower_components/angular-resource/angular-resource.js"></script>
<script type="text/javascript" src="../bower_components/bootstrap-select/dist/js/bootstrap-select.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<!-- /build -->
</body>
</html>
Si probamos estos cambios veremos que la aplicación se inicia correctamente, ahora estamos incluyendo las librerías desde Bower!
Integrando Angular JS con Bower
Actualizando la versión de Angular
Si has venido siguiendo los pasos te darás cuenta que no aparecen las categorías filtradas en la parte central, esto es porque hemos actualizado la versión de Angular a la 1.3.15 y hay algunos cambios que simplemente no funcionan como en la versión anterior.
Para solucionar este problema necesitamos cambiar el filtro del ng-repeat que despliega los bookmarks en la parte central, en la línea 59 del archivo index.html cambiamos el filtro de la siguiente manera.
<li ng-repeat="bookmark in bookmarks | filter: {category:{id: currentCategory.id}}">
En la última versión de Angular, cuando queremos filtrar usando ciertas propiedades de un objeto, tenemos que especificar la propiedad por la cual realizaremos el filtrado, en este caso el ID de la categoría.
Con eso es suficiente para poder volver a ver contenido en la parte central.
Arreglando el build
En el tema anterior vimos como usar Grunt para generar el build para producción, si intentamos realizar el build en este momento veremos que la aplicación dejará de funcionar, esto es porque ahora ya no estamos usando los CDNs y necesitamos incluir las librerías dentro del app.min.js y app.min.css.
Para eso, simplemente necesitamos indicar en el archivo Gruntfile.js aquellos archivos que se deben incluir en el build.
module.exports = function(grunt) {
grunt.initConfig({
concat: {
css: {
src: [
'css/*'
],
dest: 'build/css/app.css'
},
js : {
src : [
//Step 1
'../bower_components/jquery/dist/jquery.js',
'../bower_components/bootstrap/dist/js/bootstrap.js',
'../bower_components/angular/angular.js',
'../bower_components/angular-resource/angular-resource.js',
'../bower_components/bootstrap-select/dist/js/bootstrap-select.js',
'js/app.js'
],
dest : 'build/js/app.js'
}
},
cssmin : {
css:{
src: [
//Step 2
'../bower_components/bootstrap/dist/css/bootstrap.css',
'../bower_components/bootstrap-select/dist/css/bootstrap-select.css',
'build/css/app.css'
],
dest: 'build/css/app.min.css'
}
},
uglify: {
js: {
files: {
'build/js/app.min.js': ['build/js/app.js']
}
}
},
processhtml : {
dist: {
files : {
'build/index.html' : 'index.html'
}
}
},
copy: { //Step 3
fonts: {
expand: true,
src: '../bower_components/bootstrap/dist/fonts/**',
dest: 'build/fonts/',
flatten: true,
filter: 'isFile',
},
},
});
// Load the plugins
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-copy'); //Step 4
grunt.loadNpmTasks('grunt-processhtml');
// Default task(s).
grunt.registerTask('default', ['concat:css','concat:js','cssmin','copy:fonts','uglify','processhtml']);
};
- En el primer paso incluimos todos los archivos JavaScript que usaremos, ahora los estamos sacando del directorio de Bower.
- En el paso dos hacemos lo mismo pero ahora con los estilos.
- En el paso tres creamos una nueva tarea, aquí vamos a copiar las fuentes que usamos para desplegar los iconos, desde el directorio de bootstrap al directorio del build.
- En el paso cuatro agregamos el plugin responsable de hacer la copia de archivos, así mismo agregamos la nueva tarea a la lista de tareas por default.
Ahora si podemos hacer el build y la aplicación se ejecutará de manera correcta, es importante mencionar que ahora solamente estamos cargado dos archivos, uno para el CSS y otro para el JS, esto permitirá que nuestra aplicación se descargue mucho más rápido.
Si te ha gustado este tutorial por favor compartelo en tus redes sociales, eso me ayudará mucho a seguir publicando nuevos tutoriales y videos. Recuerda que puedes descargar el video y el código fuente desde el sitio de Quizzpot.
Te gustaría recibir más tutoriales como este en tu correo?
Este tutorial pertenece al curso Introducción a Angular JS, te recomiendo revises el resto de los tutoriales ya que están en secuencia de menor a mayor complejidad.
Si deseas recibir más tutoriales como este en tu correo te recomiendo registrarte al curso, si ya eres miembro solo identifícate y registrate al curso, si no eres miembro te puedes registrar gratuitamente!
Si no gustas registrarte en este momento no es necesario! Aún así puedes recibir los nuevos tutoriales en tu correo! Jamás te enviaremos Spam y puedes cancelar tu suscripción en cualquier momento.
Instructor del curso
Regístrate a este curso
Este tutorial pertenece al curso Introducción a Angular JS, revisa todos los tutoriales que tenemos en este mismo curso ya que están en secuencia y van de lo más sencillo a lo más complicado.
Tendrás acceso a descargar los videos, códigos y material adicional.
Podrás resolver los ejercicios incluidos en el curso así como los Quizzes.
Llevarás un registro de tu avance.
3Comentarios
buenisimo ! era lo q faltaba para completar la parte anterior de grunt !!! lo que falta agregar es esto : npm install grunt-contrib-copy --save-dev sino no me funcionaba
Ciertamente! Parece que olvide mencionar este pequeño detalle. Gracias por señalarlo.
gracias a vos por todo el curso ;)