AngularJS - ¿Que es el Scope? - Características del Scope - Codificación Paso a paso del Scope con AngularJS - Ámbito del scope - Scope Raiz $rootScope - Scope uso del $parent
Siguiendo con nuestro tutorial de AngularJS hoy vamos a ver el Scope.
Para los que no se acuerdan este código lo vimos en módulos (osea acá!).
Si bien en el ejemplo utilizamos un controlador y podemos ver como le pasamos el $scope por parámetro :
Y luego agregamos 2 variables text1 y text2, agregándole en este caso los valores a gusto.
De esta manera estaremos eliminando ambigüedades.
AngularJS - ¿Que es el Scope?
El scope es un objeto que hace referencia al modelo de la aplicación. Es un contexto de ejecución para las expresiones. El scope esta organizado en una estructura jerárquica simil a la estructura DOM de una aplicación. El scope puede ver expresiones y propagar eventos.
La traducción de scope es "ámbito", sin embargo, el término es tan habitual que solemos usar directamente la palabra en inglés. Pero creo que usando la traducción nos podemos enterar mejor qué es en realidad el scope: el "ámbito" de los datos donde estamos trabajando en las vistas.
El "scope" es la piedra angular de AnguljarJS, es donde estan los datos que se tienen
que manejar dentro de la presentación.
El scope es un gran contenedor de datos, que transporta y hace visible la información necesaria para implementar la aplicación, desde el controlador a la vista y desde la vista al controlador. En términos de código el scope no es más que un objeto al que puedes asignar propiedades nuevas, con los datos que necesites, o incluso con funciones (métodos).
Esos datos y esas funciones están visibles tanto en el Javascript de los controladores como en el HTML de las vistas, sin que tengamos que realizar ningún código adicional, ya que Angular ya se encarga de ello automáticamente. Además, cuando surgen cambios en los datos se propagan entre los controladores y las vistas automáticamente. Esto se realiza por un mecanismo que llamamos "binding", y en AngularJS también "doble binding" (en español sería enlace), esto ya lo explicamos si no te acordas por favor pasar por acá!
Scopes puede ser anidado para limitar el acceso de las propiedades de los componentes de una aplicación mientras provee acceso para compartir las propiedades del modelo.
Los Scopes anidados son los "scopes hijos" o "scopes aislados". Un "scope hijo" (prototipicamente) hereda las propiedades del scope padre. Un "scope aislado" no lo hace!.
Los scopes proveen un contexto contra las expresiones evaluadas. Por ejemplo la expresión {{userName}} no tiene sentido, a menos que sea evaluada contra el ambiento especifico que define la propiedad "userName".
La traducción de scope es "ámbito", sin embargo, el término es tan habitual que solemos usar directamente la palabra en inglés. Pero creo que usando la traducción nos podemos enterar mejor qué es en realidad el scope: el "ámbito" de los datos donde estamos trabajando en las vistas.
El "scope" es la piedra angular de AnguljarJS, es donde estan los datos que se tienen
que manejar dentro de la presentación.
El scope es un gran contenedor de datos, que transporta y hace visible la información necesaria para implementar la aplicación, desde el controlador a la vista y desde la vista al controlador. En términos de código el scope no es más que un objeto al que puedes asignar propiedades nuevas, con los datos que necesites, o incluso con funciones (métodos).
Esos datos y esas funciones están visibles tanto en el Javascript de los controladores como en el HTML de las vistas, sin que tengamos que realizar ningún código adicional, ya que Angular ya se encarga de ello automáticamente. Además, cuando surgen cambios en los datos se propagan entre los controladores y las vistas automáticamente. Esto se realiza por un mecanismo que llamamos "binding", y en AngularJS también "doble binding" (en español sería enlace), esto ya lo explicamos si no te acordas por favor pasar por acá!
AngularJS - Características del Scope
El Scope provee una API ($watch) que observa las mutaciones/cambios del modelo.
El Scope provee una API ($apply) para propagar cualquier cambio del modelo atravez del sistema en la vista desde afuera del "Reino Angular" (controllers, services, Angular event handlers).
Scopes puede ser anidado para limitar el acceso de las propiedades de los componentes de una aplicación mientras provee acceso para compartir las propiedades del modelo.
Los Scopes anidados son los "scopes hijos" o "scopes aislados". Un "scope hijo" (prototipicamente) hereda las propiedades del scope padre. Un "scope aislado" no lo hace!.
Los scopes proveen un contexto contra las expresiones evaluadas. Por ejemplo la expresión {{userName}} no tiene sentido, a menos que sea evaluada contra el ambiento especifico que define la propiedad "userName".
AngularJS - Codificación Paso a paso del Scope con AngularJS
Bueno ya arriba explicamos para que sirve el scope, todavía estamos en deuda en explicar a fondo el controler y services pero bueno vamos paso a paso ya que casi todo esta va de la mano. Se acuerda de este código?
<!DOCTYPE html>
<html lang="en" ng-app="miApp" ng-controller="myCtrl">
<head>
<meta charset="UTF-8">
<title>Ejemplo AngularJS - Lado oscuro de Java</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script>
angular.module("miApp", []).controller("myCtrl", function($scope) {
$scope.text1 = "Hola ";
$scope.text2 = "El lado oscuro de Java";
});
</script>
</head>
<body>
<span> Nombre: {{text1+text2}}</span>
</body>
</html>Para los que no se acuerdan este código lo vimos en módulos (osea acá!).
Si bien en el ejemplo utilizamos un controlador y podemos ver como le pasamos el $scope por parámetro :
function($scope) {
$scope.text1 = "Hola ";
$scope.text2 = "El lado oscuro de Java";
}Después en la vista simplemente para mostrarlo utilizamos las famosas llaves {{ }} (Hermosa expresión!)
<span> Nombre: {{text1+text2}}</span>Noten que no hacemos referencia al objeto scope! simplemente a su propiedad.
En el caso que quisiéramos "bindear" (enlazar) un dato del scope con un elemento html, utilizamos la directiva ng-model. Ejemplo:
<input type="text" ng-model="text1"/>
Lo bueno de todo esto es que AngularJS siempre esta enterado de todo entonces actualiza los datos donde es necesario.
AngularJS - Ámbito del scope
Esta es la parte de seguro que me dicen eeeehhh? El scope era su traducción ámbito? Si chicos el scope es el ámbito, pero a su vez este ámbito tiene su propio alcance. Ejemplo para que lo vemos mas claro:
<!DOCTYPE html>
<html lang="en" ng-app="miApp">
<head ng-controller="myCtrl">
<meta charset="UTF-8">
<title>Ejemplo AngularJS - Lado oscuro de Java</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script>
angular.module("miApp", []).controller("myCtrl", function($scope) {
$scope.text1 = "Hola ";
$scope.text2 = "El lado oscuro de Java";
});
</script>
</head>
<body>
<span> Nombre: {{text1+text2}}</span>
<input type="text" ng-model="text1"/>
</body>
</html>
La pregunta es de acuerdo a lo que esta arriba, por que ahora cuando entramos no saluda "Hola El lado oscuro de Java" y solo actualiza lo que ingresamos en el texto?, la respuesta es muy fácil! Antes poníamos en el html completo la directiva ng-controller, pero ahora no ponemos que solo el valor de estos datos del controlador tienen alcance sobre el tag header, entonces cuando AngularJS intenta leer dentro del body el valor text1, básicamente dice "en el scope de body no existe la propiedad text1 ni text2".
AngularJS - Scope Raiz $rootScope
Como ya dijimos arriba en la definición de scope, un scope puede contener mas de un scope, es decir existe un padre, la diferencia de scope tiene que ver con sus ámbitos, los controles solo pueden ver el scope propio y el scope que tienen en común todos. Para acceder al scope en común se utiliza el parámetro $rootScope. Ejemplo:
.controller("myCtrl", function($scope, $rootScope) {
$scope.text1 = "Hola ";
$rootScope.text2 = "El lado oscuro de Java";
});
Luego el llamado a la propiedad se puede hacer como siempre:
<span> Nombre: {{text1+text2}}</span>AngularJS funciona de la siguiente manera, primero verifica en el scope del controlador si encuentra la variable genial, y si no se fija en el padre, y así sucesivamente hasta encontrar el valor.
AngularJS - Scope uso del $parent
El principal problema que podemos tener dentro de los scope es utilizar el mismo nombre para las variables, cosa que después AngularJS siempre accederá al mas cercano es decir al scope del controlador. Ejemplo:
.controller("myCtrl", function($scope, $rootScope) {
$scope.text1 = "Hola ";
$rootScope.text1 = "El lado oscuro de Java";
});
Al momento de escribir:
<span> Nombre: {{text1+text1}}</span>Siempre va a resultar en consola "Hola Hola".
Para poder acceder al scope padre se utiliza el $parent sobre la vista. Ejemplo:
<span> Nombre: {{text1+$parent.text1}}</span>De esta manera estaremos eliminando ambigüedades.
Vamos agarrando la onda?
Bueno gente espero que allá quedado claro! Cualquier costa saben que pueden comentar!
AngularJS - ¿Que es el Scope? - Características del Scope - Codificación Paso a paso del Scope con AngularJS - Ámbito del scope - Scope Raiz $rootScope - Scope uso del $parent
Reviewed by El lado oscuro de java
on
mayo 22, 2015
Rating:
Reviewed by El lado oscuro de java
on
mayo 22, 2015
Rating:
La verdad que no tengo mucha experiencia en general con javascript, y este es mi primer tutorial que leo sobre angularjs por lo que no me quedó muy claro. Algún consejo para pillar la onda de forma rápida? Aun así tu tuto parece estar muy bien porque se me han quedado cositas. Un saludo. Y gracias por tu generosidad
ResponderEliminarBuenas tardes, quisiera saber si pudiera utilizar el $scope para cambiar el valor del ng-model pero utilizando el parametro de una funcion. ¿es posible hacerlo?
ResponderEliminarTest
ResponderEliminar