lunes, 9 de marzo de 2015

AngularJS - Introducción: Ámbitos (Scopes)

El concepto de los ámbitos es muy importante y se deben entender para el empleo de AngularJS. La importancia de este concepto radica en qué los ámbitos son utilizados por el framework para comunicar controladores y vistas. Es decir, que los ámbitos son el componente que utilizamos para relacionar nuestros datos con las vistas, por tanto deberemos asignar los datos deseados a un ámbito para que este lo lleve a la interfaz.

En un ámbito podemos declarar variables* para que estás sean accesibles desde la vista. Es decir, que desde un controlador podremos utilizar las variables del ámbito para establecer los datos que se envían a la parte de la página asociada al controlador. Para el acceso a los ámbitos desde el código se utiliza el objeto $scope (este objeto representa un ámbito).

AngularJS no posee un sólo ámbito, si no que por cada uno de los controladores se crea un nuevo ámbito**. Además los ámbitos están jerarquizados por lo que al anidar un controlador o varios dentro de otro, los ámbitos creados serán hijos*** del ámbito del controlador superior (desde un ámbito podemos acceder al padre utilizando $parent).  Dentro de la jerarquía existe un ámbito que es el padre de todos y que actúa de forma global, por lo que deberemos tener cuidado al manejarlo. El ámbito padre de todos es accesible mediante $rootScope
Ejemplo de jerarquía de los ámbitos


*Aunque en estos ejemplos y en la mayoría de los tutoriales los datos se mandan en variables del $scope, lo ideal sería pasar los datos en un objeto Javascript y que este actué como modelo de datos. Esta es una práctica que no se tiene en cuenta muy a menudo y que si no se lleva a cabo podríamos  tener problemas con la jerarquía de ámbitos.

**Las directivas también crean ámbitos, aunque la jerarquía en este caso se ve modificada. Por ejemplo, una directiva permite que no se herede el ámbito del controlador sobre el que se utiliza y de esta forma que posea un ámbito propio. Si te interesan los ámbitos de las directivas:
*** Entendiendo la herencia en Javascript:

No hay comentarios:

Publicar un comentario