Estudio Del Framework Angularjs Y Su Uso En El Desarrollo Web

Universidad del Bío-Bío. Sistema de Bibliotecas - Chile FACULTAD DE CIENCIAS EMPRESARIALES Departamento de Ciencias de la Computación y Tecnologías de la Información ESTUDIO DEL FRAMEWORK ANGULARJS Y SU USO EN EL DESARROLLO WEB Memoria para optar al título de Ingeniero Civil en Informática AUTOR: CAMILO ANDRES STUARDO MÜLCHI Profesor Guía: Rodrigo Ariel Torres Avilés Chillán, Diciembre de 2016

Universidad del Bío-Bío. Sistema de Bibliotecas - Chile AGRADECIMIENTOS A mis padres Por siempre apoyarme y motivarme en este proceso, por la paciencia y cariño que tuvieron, ya que no fue corto. A mis compañeros de Generación Por su amistad y compartir tantas experiencias conmigo, en especial a German, Guillermo, Francisca, Christian, Naaman y Alejandra. Gracias a todos. Al profesor Luis Gajardo Por ayudarme en mi primera memoria, la cual no cumplió con los objetivos, pero a pesar de mis reiterados errores siempre estuvo ahí para apoyarme. Al profesor Rodrigo Torres Por ayudarme en esta memoria, y estar presente cada vez que necesitaba de su ayuda. Camilo Andres Stuardo Mülchi 2

Universidad del Bío-Bío. Sistema de Bibliotecas - Chile RESUMEN Actualmente, los framework basados en JavaScript se usan en el desarrollo de la mayoría de las aplicaciones web y siempre están apareciendo herramientas novedosas que buscan liderar el mercado. Además, con la contaste evolución de las tecnologías web, se pueden materializar ideas que años atrás sería impensable realizar, debido a que no existía los recursos para construirlas. El objetivo de este proyecto es el estudio del framework AngularJS uno de los más usados del mercado. Se realiza un análisis comparativo que permite dar a conocer al lector las características que proporciona AngularJS y que lo ha llevado a ser uno de los líderes del mercado. Es un estudio que, además, incluye el desarrollo de un caso práctico para mostrar el funcionamiento de esta herramienta. Para realizar el estudio, se ha decidido analizar tres frameworks basados en JavaScript: AngularJS, BackboneJS, Ember. Se detallan las características de cada una, su arquitectura y tipos de aplicaciones que se puede realizar con ellas. El estudio determinó que AngularJS es la más completa en comparación a BackboneJS y Ember, debido a que presenta más y/o mejores funcionalidades con respecto a las otras herramientas. Además, el estudio permitió observar todas las principales características que brinda AngularJS al mundo de las aplicaciones web. 3

Universidad del Bío-Bío. Sistema de Bibliotecas - Chile SUMMARY Currently, JavaScript-based frameworks are used in the development of most web applications and new tools are always emerging that seek to lead the market. In addition, with the evolution of the web technologies, you can materialize ideas that years ago would be unthinkable to do, because there were no resources to build them. The objective of this project is to study the AngularJS framework one of the most used on the market. A comparative analysis is carried out that allows the reader to know the characteristics that AngularJS provides and that has led him to be one of the leaders in the market. It is a study that, in addition, includes the development of a practical case to show the operation of this tool. To perform the study, it has been decided to analyze three frameworks based on JavaScript: AngularJS, BackboneJS, Ember. They detail the characteristics of each one, its architecture and types of applications that can be realized with them. The study determined that AngularJS is the most complete in comparison to BackboneJS and Ember, because it presents more and/or better functionalities with respect to the other tools. In addition, the study allowed to observe all the main features that AngularJS provides to the world of web applications. 4

Universidad del Bío-Bío. Sistema de Bibliotecas - Chile INDICE GENERAL 1. 2. Introducción . 12 1.1. Introducción General . 12 1.2. Especificaciones del estudio. . 13 1.3. Especificaciones del prototipo. . 13 1.4. Objetivos. . 14 1.5. Metodología . 14 1.6. Alcances y Limitaciones . 15 1.7. Definiciones y abreviaturas . 15 Marco Teórico . 18 2.1. Tecnología JavaScript. 18 2.1.1. Introducción. 18 2.1.2. Como identificar JavaScript dentro de las aplicaciones web. . 18 2.1.3. Ventajas. 19 2.1.4. Desventajas . 20 2.2. Arquitectura MVC . 20 2.2.1. Patrón de arquitectura Modelo Vista Controlador (MVC) . 20 2.2.2. Capa Modelo . 21 2.2.3. Capa Vista . 21 2.2.4. Capa Controlador . 21 2.3. Framework AngularJS . 22 2.3.1. Introducción. 22 2.3.2. Cronología de AngularJS . 22 2.3.3. Instalación. 23 2.3.4. Conceptos Generales . 24 2.3.5. Características de AngularJS . 25 5

Universidad del Bío-Bío. Sistema de Bibliotecas - Chile 3. 2.3.5.1. scope . 25 2.3.5.2. Data Binding . 26 2.3.5.3. Directivas. 28 2.3.5.4. Expresiones . 31 2.3.5.5. Módulos . 32 2.3.5.6. Controladores . 33 2.3.5.7. Servicios . 34 2.3.5.8. Routing . 36 Estudio Comparativo. 37 3.1. Introducción . 37 3.2. Presentación de los Framework . 37 3.2.1. 3.2.1.1. Logo . 38 3.2.1.2. Ventajas . 38 3.2.1.3. Desventajas . 39 3.2.1.4. Resumen Gráfico . 39 3.2.2. BackboneJS . 40 3.2.2.1. Logo . 40 3.2.2.2. Ventajas . 40 3.2.2.3. Desventajas . 41 3.2.2.4. Resumen Gráfico . 41 3.2.3. 3.3. AngularJS . 38 Ember . 42 3.2.3.1. Logo . 42 3.2.3.2. Ventajas . 42 3.2.3.3. Desventajas . 42 3.2.3.4. Resumen Gráfico . 43 Análisis Comparativo . 43 6

Universidad del Bío-Bío. Sistema de Bibliotecas - Chile 3.3.1. Definición de parámetros de comparación . 45 3.3.2. Análisis de parámetros y variables de comparación. 47 AngularJS . 47 3.3.2.2. BackboneJS . 48 3.3.2.3. Ember . 49 3.3.3. Tabla de Pesos . 50 3.3.4. Tabla comparativa resumen frameworks Cliente MVC . 51 3.4. 4. 3.3.2.1. Conclusiones de la comparación entre frameworks . 52 Caso Práctico . 53 4.1. Introducción . 53 4.2. Caso Práctico: Prototipo página de noticias Talleres ICI. 53 4.2.1. Objetivo . 53 4.2.2. Descripción . 53 4.2.2.1. MongoDB . 54 4.2.2.2. ExpressJS . 58 4.2.2.3. AngularJS . 58 4.2.2.4. Node.js . 58 4.2.3. Implementación. 59 4.2.4. Capturas de la aplicación . 71 4.2.5. Resultado. 77 5. Conclusiones . 78 6. Recomendaciones . 79 7. Bibliografía . 80 8. Anexo: Código fuente del caso práctico . 83 7

Universidad del Bío-Bío. Sistema de Bibliotecas - Chile INDICE DE TABLAS Tabla.1. Conceptos importantes AngularJS. . 24 Tabla.2. Principales Directivas en AngularJS. . 29 Tabla.3. Notas para las características analizadas. . 44 Tabla.4. Valores para los distintos pesos. 45 Tabla.5. Análisis de los parámetros a comparar en AngularJS. . 47 Tabla.6. Análisis de los parámetros a comparar en BackboneJS. . 48 Tabla.7. Análisis de los parámetros a comparar en Ember. . 49 Tabla.8. Tabla de pesos con la nota resultado por cada característica. . 50 Tabla.9. Tabla resumen con los resultados obtenidos. . 51 8

Universidad del Bío-Bío. Sistema de Bibliotecas - Chile INDICE DE IMÁGENES Figura.1. Ejemplo uso de ficheros externos en JavaScript. 18 Figura.2. Arquitectura MVC. . 21 Figura.3. Instalación AngularJS utilizando el CDN de Google. 23 Figura.4. Ejemplo Framework AngularJS. . 23 Figura.5. scope en Angular. . 25 Figura.6. Ejemplo funcionamiento scope entre vista y controlador. . 26 Figura.7. One-Way Data Binding. . 27 Figura.8. Ejemplo de uso de ng-model. 27 Figura.9. Enlace de datos Bidireccional AngularJS. . 27 Figura.10. Two-Way Data Binding. . 28 Figura.11. Tipos de Directivas en AngularJS. . 29 Figura.12. Ejemplo de Directivas personalizada en AngularJS. . 30 Figura.13. Ejemplo de Directivas personalizada en AngularJS (Vista). . 30 Figura.14. Plantilla que retorna la directiva personalizada. . 31 Figura.15. Ejemplo de expresión numérica aceptada por Angular. . 31 Figura.16. Ejemplo de expresión en cadena de texto aceptada por Angular. 31 Figura.17. Ejemplo de expresión con Arrays aceptada por Angular. 32 Figura.18. Ejemplo de expresión con Objetos aceptada por Angular. . 32 Figura.19. Declaración de un módulo en Angular. . 32 Figura.20. Declaración de un módulo con sus dependencias en Angular. . 33 Figura.21. Módulo enlazado en la vista mediante la directiva ng-app. . 33 Figura.22. Ejemplo de declaración del controlador. . 33 Figura.23. Ejemplo de declaración del controlador con dependencias. . 34 Figura.24. Ejemplo de controlador enlazado a la vista. . 34 Figura.25. Ejemplo de uso de Factory y Service. . 35 9

Universidad del Bío-Bío. Sistema de Bibliotecas - Chile Figura.26. Ejemplo de uso de Routing. . 36 Figura.27. Logo AngularJS. . 38 Figura.28. Gráfico resumen de áreas en evaluación para AngularJS. . 39 Figura.29. Logo BackboneJS. 40 Figura.30. Gráfico resumen de áreas en evaluación para BackboneJS. . 41 Figura.31. Logo ember. . 42 Figura.32. Gráfico resumen de áreas en evaluación para Ember. . 43 Figura.33. Comparación entre el funcionamiento de NoSQL y RDBMS. . 54 Figura.34. Sintaxis JSON. . 55 Figura.35. Ejemplo Objeto en JSON. . 56 Figura.36. Ejemplo Arreglo en JSON. . 56 Figura.37. Ejemplo JSON. . 57 Figura.38. Ejemplo Path en JSON. . 57 Figura.39. Ilustración de la interacción de los elementos de MEAN.js. . 59 Figura.40. Clonación del repositorio de MEAN.js. . 60 Figura.41. Estructura del prototipo. . 60 Figura.42. Archivo package.json incluido en el paquete de MEAN.js. . 62 Figura.43. Comando “npm install” genera la instalación de las dependencias. . 62 Figura.44. Comando “npm start” inicia la aplicación. . 63 Figura.45. Fichero app.js. . 64 Figura.46. Fichero Comments.js. . 65 Figura.47. Fichero Images.js. . 66 Figura.48. Fichero Posts.js. . 67 Figura.49. Fichero Users.js. . 68 Figura.50. Extracto del fichero index.ejs. . 70 Figura.51. Home de la aplicación sin usuario logeado. . 71 Figura.52. Home de la aplicación con usuario logeado. . 72 10

Universidad del Bío-Bío. Sistema de Bibliotecas - Chile Figura.53. Segundo Post con comentario agregado sin usuario logeado. . 73 Figura.54. Segundo Post con comentario agregado con usuario logeado. . 74 Figura.55. Pantalla de log in. 75 Figura.56. Pantalla de formulario de registro. . 76 Figura.57. Fichero index.js (parte 1). . 83 Figura.58. Fichero index.js (parte 2). . 84 Figura.59. Fichero index.js (parte 3). . 85 Figura.60. Fichero index.js (parte 4). . 86 Figura.61. Fichero index.js (parte 5). . 87 Figura.62. Fichero index.js (parte 6). . 88 Figura.63. Fichero angularApp.js (parte 1). . 89 Figura.64. Fichero angularApp.js (parte 2). . 90 Figura.65. Fichero angularApp.js (parte 3). . 91 Figura.66. Fichero angularApp.js (parte 4). . 92 Figura.67. Fichero index.ejs (parte 1). 93 Figura.68. Fichero index.ejs (parte 2). 94 Figura.69. Fichero index.ejs (parte 3). 95 Figura.70. Fichero index.ejs (parte 4). 96 11