Tutorial de AngularJS: Tema 3 – Conceptos

AngularJS

En este post vamos a ir recopilando los conceptos necesarios para comprender y utilizar toda la potencia que nos proporcionan JavaScript, AngularJS y el resto de herramientas que utilizaremos a lo largo de los temas.

Será un post autoincremental, ya que añadiremos conceptos conforme vayamos detectando que se necesita una aclaración de alguno de ellos. Intentaremos que sea resumido y claro, que para ampliar la información tenemos Wikipedia, la documentación de cada herramienta y miles de páginas web que tratan de lo mismo.

Comencemos…

DOM

DOM son las siglas de Document Object Model. Según Wikipedia, es una API que proporciona un conjunto estándar de objetos para representar documentos HTML y XML, un modelo estándar sobre cómo pueden combinarse dichos objetos, y una interfaz estándar para acceder a ellos y manipularlos. A través del DOM, los programas pueden acceder y modificar el contenido, estructura y estilo de los documentos HTML y XML.

Para resumir un poco el concepto, digamos que DOM sería un conjunto de reglas y objetos que nos permiten manipular los documentos HTML mediante nuestro código. En nuestro caso, utilizaremos código JavaScript (JQery, AngularJS) y CSS para interactuar con el DOM y presentar un  código HTML formado a nuestra convenencia.

MVC y MVVM

MVC son las siglas de Model-View-Controller (Modelo-Vista-Controlador). Es un patrón que separa los datos y la lógica de negocio, la interfaz de usuario y la gestión de eventos y comunicaciones

Se basa en tres componentes:

  • Modelo: El Modelo representa la información (los datos) y las reglas del negocio.
  • Vista: La Vista contiene elementos de la interfaz de usuario como textos, formularios de entrada.
  • Controlador: El Controlador administra la comunicación entre la vista y el modelo.

MVVM son las siglas de Model-View-ViewModel. Es una variación del patrón MVC que sustituye al Controlador por un ViewModel y un Binder para sincronizar la información en vez del controlador. En este patrón de diseño se separan los datos de la aplicación y la interfaz de usuario, pero en vez de controlar manualmente los cambios en la vista o en el acceso a datos, estos se actualizan directamente cuando se produce un cambio en alguno de los dos. Por ejemplo si en la Vista actualiza un dato que está presentando se actualiza automáticamente en el modelo y viceversa.

SPA

SPA son las siglas de Single Page Application. Una SPA es una web que se carga una sola vez y que refresca en el navegador únicamente los componentes que se actualizan. Proporciona la sensación al usuario de una fluidez similar a la que tendría si estuviera ante una aplicación de escritorio.

Para conseguir esto, el código HTML, librerías y clases se cargan inicialmente y únicamente se cargan dinámicamente los recursos necesarios en cada Vista. Hasta la fecha, la preferencia para confeccionar webs con contenido que se cargaba a demanda era usar AJAX, pero ahora el panorama está cambiando y se empiezan a utilizar frameworks JavaScript como ember.js, meteor.js o AngularJS.

DATA BINDING

Data Binding es el proceso que establece las comunicaciones entre el interfaz de usuario (la Vista) y la lógica de negocio (el Modelo).

AngularJS implementa “Two-Way Data Binding”, lo que supone que la actualización de la información es bidireccional y automática (el Modelo se actualiza conforme se actualiza la Vista y viceversa). Esto reduce de manera significativa la cantidad de código a programar y mejora la testeabilidad y el rendimiento.

CONCEPTOS DE AngularJS

SCOPE

El scope es un objeto que referencia al Modelo de la aplicación. Es el contexto de ejecución de las expresiones. Pueden capturar expresiones y propagar eventos.

Los scopes están dispuestos en una estructura jerárquica que se mimetiza con la estructura del DOM de la aplicación.

MARKUPS

Se identifican por una doble apertura y cierre de llaves {{ }} y se usan para enlazar en el código HTML expresiones como elementos de AngularJS.

MÓDULOS

En resumidas cuentas, un módulo se puede definir como un contenedor de las diferentes partes de la aplicación (controladores, servicios, filtros, etc.).

Todo son módulos porque, a diferencia con otras aplicaciones, en las aplicaciones en AngularJS no existe una método principal que instancie y enlace el resto de partes de la aplicación.

Según AngularJS, las ventajas de esto son que:

  • El proceso declarativo es más sencillo de entender.
  • Puedes empaquetar el código como módulos reutilizables.
  • Los módulos pueden ser cargados en cualquier orden (incluso en paralelo), ya que la ejecución es lo que se queda en espera de ser llamada.
  • Los test unitarios sólo necesitan cargar los módulos relevantes, lo que hace que sean más rápidos.
  • Los test end-to-end pueden usar módulos que sobreescriban la configuración.

RUTAS

Una vez que nuestra aplicación va creciendo y va teniendo más secciones, nos vemos en la necesidad de organizar nuestro código. En php, por ejemplo, lo que se haría es crear diferentes páginas por cada sección. En AngularJS, que como ya hemos dicho es una SPA, esto no se hace así sino que se utiliza una técnica llamada Routing. Mediante el Routing lo que se hace es crear plantillas y sub-plantillas según la url de la página.

AngularJS utiliza un servicio especial que se llama route provider, que llama a una característica que se llama Deep-Linking. Deep-Linking se encarga de la dirección URL y administra la forma en que se asigna al estado actual de la página. Esto se hace mediante el establecimiento de diferentes URLs según el estado de la página. Se aprovecha una característica que ya se utiliza en los sitios web SPA que llamada # (hash) y se utiliza en las etiquetas de anclaje (anchor tags).

DIRECTIVAS

Son atributos o elementos que aumentan elementos del DOM existente o que representan un componente del DOM reutilizable. Se utilizan para reemplazar

CONTROLADORES

En AngularJS, un controlador es una función constructora que se usa para aumentar el scope.

Cuando un Controlador se adjunta al DOM mediante la directiva ng-controller, AngularJS instanciará un nuevo objeto Controlador utilizando la función constructora del Controlador. Un nuevo scope hijo estará utilizable como un parámetro inyectable a la función constructora del Controlador como $scope. ¿Qué quiere decir esto? Pues que cada vez que creemos un controlador nuevo, éste creará un nuevo scope que se anexará al arbol de scopes como una rama más.

Los Controladores se usan para:

  • Inicializar el estado del objeto $scope.
  • Añadir comportamientos al objeto $scope.

Los Controladores no se usan para:

  • Manipular el DOM. Los Controladores sólo deberían contener lógica de negocio. Añadir lógica de presentación a los Controladores puede afectar significativamente a la testabilidad. Angular ya dispone del Data Binding para la mayoría de los casos y de Directivas para encapsular las modificaciones manuales del DOM.
  • Formatear inputs. Para esto ya se dispone de Controles de Formularios desde AngularJS.
  • Filtrar outputs. Se deben usar los Filtros de AngularJS.
  • Compartir código o estados entre Controladores. Se deben usar más bien los Servicios de AngularJS.
  • Controlar el ciclo de vida de otros componentes. Por ejemplo, para crear instancias a servicios.

CONTROLES DE FORMULARIOS

Los Controles (input, select, textarea) son las vías que tiene un usuario de introducir datos. Un Formulario es una colección de Controles con la finalidad de agrupar los Controles relacionados entre sí.

En AngularJS, a los Formularios y Controles se les dota de servicios de validación, de modo que se pueda informar al usuario del estado válido o inválido del mismo antes de enviar los datos. Esto mejora la experiencia de usuario y la cantidad de información que se envía al servidor, ya que el usuario recibe de inmediato dónde están los errores y cómo solventarlos. Esto no supone que podamos evitar las comprobaciones en el servidor (un usuario malintencionado con conocimientos podría saltar las validaciones fácilmente), sino que la mejora en la experiencia de usuario también nos proporcionará mejores datos a comprobar.

SERVICIOS

Los Servicios de AngularJS son objetos sustituibles que están enlazados entre sí mediante la inyección de Dependencias (DI). Se utilizan para organizar y compartir el código a través de la aplicación.

Los Servicios de AngularJS son:

  • Instanciados en Modo Perezoso: AngularJS sólo instancia un servicio cuando un componente de la aplicación depende de él.
  • Singletons: Cada componente dependiente de un servicio obtiene una referencia a la instancia única generada por la fábrica de servicios (Service Factory).

AngularJS ofrece bastantes servicios útiles (como $http), pero para muchas de las aplicaciones posiblemente necesitaremos crear los nuestros propios.

FILTROS

Un filtro formatea el valor de una expresión para la mostrar un resultado al usuario. Pueden ser utilizados en las plantillas, controladores o servicios.

PLANTILLAS

Un template es uno o varios ficheros escritos en código HTML que contienen las anotaciones de elementos y atributos específicos de AngularJS.

En el próximo tutorial vamos a proponer una estructura de carpetas recomendada y ya empezaremos a programar.

Deja un comentario

A %d blogueros les gusta esto: