Cuando trabajamos con AngularJS y empezamos a leer la documentación lo primero que vemos es la palabra Scope, esta se pudiera traducir al castellano como ámbito, sin embargo el uso que hay dentro de este framework es mucho más amplio.
Es por ello que debemos entender que es realmente el Scope y cómo se comporta en nuestras aplicaciones, de esta forma podremos dar un salto entre intentar utilizar AngularJS y utilizarlo con base, convicción y no solo repitiendo código.
Lo más interesante es que como AngularJS está construido de forma completa en JavaScript, podemos tomar los conceptos del lenguaje y aplicarlos en el estudio y entendimiento de las herramientas del framework, dándonos así un nivel adicional de habilidades para poder desarrollar la lógica que pensemos para nuestras aplicaciones
Requisitos
1- Para cumplir este tutorial necesitamos un servidor web como Wamp, o si estamos en entornos como Linux una configuración Lamp nos bastará, la idea es poder servir nuestros archivos que incorporan AngularJS y no solamente abrir un documento HTML.
2- Debemos tener también un editor de textos enriquecido que nos permita escribir el código necesario para nuestros ejemplos, este puede ser Sublime Text o Notepad++.
3- Finalmente debemos tener acceso a Internet para utilizar la inclusión de AngularJS a través de su CDN o haber descargado el archivo que contiene al framework para servirlo de forma local.
¿Qué es el Scope?
No es más que un simple objeto JavaScript que tiene la capacidad de almacenar una estructura llave valor, además de poder almacenar propiedades. Esto nos ayuda bastante ya que si lo vemos desde esa óptica podemos aplicar los conceptos básicos del lenguaje de programación
En la siguiente imagen vemos como es la escala o la forma en la cual AngularJS va generando diferentes Scopes, aunque todos derivan del Scope del elemento que los contiene a excepción del Scope Raíz que es el primero que se genera. Por supuesto si hay dos elementos a un mismo nivel dentro del ámbito raíz ambos heredarán de este.
¿Cómo funciona el prototype?
A diferencia de lenguajes como Java, C++ y otros, JavaScript maneja el concepto de herencia de forma diferente, es por ello que debemos aprender lo que es el uso de prototype que no es más que un método que existe dentro de los constructores de clases que nos permite añadir nuevas propiedades dentro de nuestro código.
Esto a pesar que es algo propio de JavaScript nos permite entender un poco más cómo podemos obtener algunos resultados, además que nos ayuda a entender cómo funciona de forma más interna el Scope dentro de AngularJS.
En el siguiente ejemplo veremos cómo creamos una clase con unas propiedades o atributos particulares, luego a través de prototype podemos añadir una propiedad adicional a nuestra clase y así al hacer la instancia podemos acceder a la misma.
Lo interesante es que hay un método que nos ayuda a verificar si algún atributo es propio de la clase, si este método nos devuelve un valor falso entonces sabremos que es un atributo fruto de una herencia con prototype. Veamos el código que nos representa todo esto:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <script type="text/javascript"> function Persona(nombre,edad){ this.nombre=nombre; this.edad=edad;} Persona.prototype.carrera="Informática";var persona=new Persona('Jonathan','26'); console.log(persona.nombre);console.log(persona.carrera);console.log(persona.hasOwnProperty('carrera')); </script> </body></html>Ahora veamos como en la consola JavaScript obtenemos los resultados que estamos buscando:
Notamos entonces como el método hasOWnProperty nos ayuda a identificar a los atributos o propiedades originarios de la clase o no. Así podemos entender si hemos creado o no una herencia efectiva, ya que podemos darnos cuenta como estamos extendiendo la capacidad de atributos de una clase.
Y así va escalando a medida que va encontrando elementos internos unos dentro de otros, heredando de la estructura inmediatamente anterior tomando sus funcionalidades derivadas de $rootScope y las funcionalidades propias.
En el siguiente ejemplo hemos elaborado una aplicación en la cual tenemos dos controladores, de esta forma vemos como a través de la herencia de scope se van heredando las diferentes propiedades o atributos de los mismos, hasta resultar en una estructura anidada que puede ir accediendo a propiedades de los padres y extendiendo las funcionalidades de la aplicación como tal. Veamos el código:
<html ng-app="miAplicacion"><head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script></head><body ng-controller="PrimerControlador"> <span>{{editores}} tiene libros de: {{categoria}}</span> <div ng-controller="SegundoControlador"> <h3>Los libros más populares de {{editores}} son:</h3> <ul> <li ng-repeat="libro in libros"> {{libro}} </li> </ul> </div> <script type="text/javascript"> 'use strict'; angular.module('miAplicacion', [ 'miAplicacion.controllers' ]); angular.module('miAplicacion').run(function($rootScope){ $rootScope.title='Primer Libro'; $rootScope.nombre="Scope Raiz"; }); angular.module('miAplicacion.controllers',[]).controller('PrimerControlador', function($scope){ $scope.editores='Solvetic'; $scope.categoria="Desarrollo Angular"; $scope.nombre="Ambito del PrimerControlador"; }); angular.module('miAplicacion.controllers').controller('SegundoControlador', function($scope){ $scope.libros = ['Un Libro','Otro Libro','Un Tercer Libro']; $scope.nombre="Ambito del SegundoControlador"; }); </script></body></html>Aquí el ejemplo nos demuestra lo que explicamos anteriormente, cuando dentro del ámbito del SegundoControlador llamamos a la propiedad editores y al imprimirla vemos que lleva el valor asignado del elemento padre PrimerControlador. Finalmente añadimos un atributo o propiedad libros que no estaba en el Scope raíz y pudimos iterar a través del $scope del controlador en cuestión. Otro aspecto interesante es que las propiedades del Scope raíz aunque existen no las hemos invocado dentro de un ámbito en el que las podamos acceder, por ello al momento de que veamos el ejemplo no las veremos en la pantalla del navegador
Esto puede verse como un poco rebuscado, pero es la mejor forma de entender como la variable $scope trabaja dentro de nuestras aplicaciones y así poder aplicar esto dentro de nuestra lógica para sacar el mayor provecho a las herramientas del framework. Veamos en la siguiente imagen como luce nuestra aplicación anterior y como se han cumplido los puntos explicados:
Notamos entonces como el listado de libros pertenece al objeto Scope más interno, sin embargo como no definimos el atributo editorial podemos utilizar el que definimos en el controlador padre, llegando a la conclusión que adelantamos del uso de prototype por parte de AngulaJS.
El watcher como concepto avanzado
Hay momentos en los que queremos seguir y de alguna forma hacer un monitoreo de alguna situación en particular, es aquí donde entra el objeto $watch, que nos permite realizar exactamente eso que explicamos.
Esto a simple vista podría parecer como algo muy avanzado, pero AngularJS lo lleva cerca de nuestras manos, sin hacer mucha complicación. El objeto $watch no solo puede observar un valor en específico, podemos también asignarle que lo haga con una colección, lo que nos da posibilidad de tener en consideración múltiples valores a la vez, y así lograr resultados más complejos que con la forma anterior.
Con esto hemos terminado con este tutorial, hemos aprendido a entender de qué trata el Scope dentro de AngularJS y para ello nos hemos apoyado en los conceptos más abstractos de JavaScript, demostrando así que este lenguaje nos da todas las herramientas para lograr trabajos tan avanzados como el mismo framework del que hablamos, pero que si dominamos sus conceptos podremos hacer de las herramientas que utilizamos algo superior.
