viernes, 10 de abril de 2015

AngularJS - Introducción: Módulos (Modules)


En los lenguajes de alto nivel por lo general se tiene una característica muy importante: la modularidad (por ejemplo: namespace en C# o package en Java). Sin embargo, ¿qué ocurre en Javascript con la modularidad? No existe, Javascript mantiene un espacio global para todo. ¿Qué implicaciones tiene esto? Que a medida que crezca nuestro código más sencillo es que se produzca una colisión de nombres de variables, funciones...

AngularJS pretende solucionar los problemas con la modularidad de Javascript. Para ello AngularJS implementa el concepto de módulos, permitiendo la asociación de recursos a cada uno de los módulos. De esta forma, el framework nos proporciona una herramienta para poder realizar un división lógica de responsabilidades.

¿Qué es un módulo? Un modulo es un objeto de AngularJS que actúa como contenedor de recursos y partes de la aplicación: Controladores, servicios, filtros, etc. [1]. En la siguiente imagen, obtenida de un vídeo de Dan Wahlin [2], se puede ver qué puede definirse en un módulo de AngularJS

Una de las funciones principales del módulo es la de configuración, dónde destaca particularmente la configuración de rutas de acceso a la aplicación. Por tanto, analizando la relación entre los componentes de AngularJS se puede obtener el siguiente esquema [3] (llevado a cabo por Dan Wahlin)

Para utilizar el módulo como aplicación la directiva de Angular ng-app espera el nombre de un módulo, será en este módulo dónde se buscarán los diferentes componentes de la aplicación. 

Para trabajar con los módulos, lo primero que se debe conocer es la forma de crearlos y de acceder a ellos:
  • Crear un nuevo módulo: angular.module('nombreModulo',[]);
  • Obtener la referencia de un módulo existe: angular.module('nombreModulo');
La única diferencia entre ambos métodos es que al crear el módulo se tiene un segundo parámetro que es un array. Este array sirve para especificar los nombres de los módulos necesarios para que funciones el módulo que estamos creando. Es decir, para especificar las dependencias. Un ejemplo claro es: dos módulos A y B en los que un controlador del modulo A necesitará un servicio del módulo B, por lo tanto al crear el módulo B:  angular.module('B',[]); Mientras que para crear el módulo A:  angular.module('A',['B']); Es decir, se especifica que el módulo A necesita el módulo B para funcionar.

En código se puede ver más claro



Aprendiendo AngularJS

[1] https://docs.angularjs.org/guide/module
[2] https://www.youtube.com/watch?v=rAyEGv67P-U
[3] http://weblogs.asp.net/dwahlin/video-tutorial-angularjs-fundamentals-in-60-ish-minutes

No hay comentarios:

Publicar un comentario