Curso de AngularJS y REST

Esta página es de solo lectura. Puedes ver la fuente pero no puedes cambiarla. Pregunta a tu administrador si crees que esto es incorrecto.
====== 4.11 $rootScope ======
En este tema vamos a hablar del ''$rootScope'', que no es una directiva , aunque la unidad se llame ''Mas directivas''.

El ''$rootScope'' es el ''scope'' del que heredan el resto de los scopes que usamos en los controladores ((Realmente hay mas sitios donde se usan scopes)). Su utilidad es como variable global ya que nos permite añadir propiedades a él y que el resto de controladores tengan acceso.

Al ser como una variable global hay que usarlo con cuidado y en general si tenemos algún dato global es mejor usar un servicio para guardar dicho dato que usar el ''$rootScope''. 

Sin embargo el ''$rootScope'' tiene una ventana sobre un servicio. Usando un servicio nos obliga en todos los ''scope'' que necesitemos a tener que inyectarlo y guardarnos sus datos. Es decir que hay que repetir ese pequeño trozo de código en todos los controladores. Sin embargo , usando ''$rootScope'' más un servicio podemos tener lo mejor de ambos mundos.

Veamos ahora un ejemplo de ésto.En este ejemplo vamos a suponer que todos los controladores necesitan la propiedad ''appName'' con el nombre de la aplicación para poder mostrarla en la página.

El código JavaScript de los controladores quedaría así:

<sxh js>

app.controller("ControllerA",["$scope",function($scope) {
  $scope.appName="Gestión de seguros médicos"
}]);

app.controller("ControllerB",["$scope",function($scope) {
  $scope.appName="Gestión de seguros médicos"
}]);
</sxh>

Vemos que tenemos 2 controladores ("ControllerA" y "ControllerB"). En ambos casos definimos la misma propiedad en el ''$scope'' llamada ''appName''. Nos podríamos ahorrar las 2 líneas (o muchas más si hubiera más controladores) usando ''$rootScope'' y definiendo la propiedad ''appName'' en él.

Para definir una única vez la propiedad y fuera de los controladores se usan un [[unidades:03_servicios:04_tiposservicios#bloque_run|bloque run]].

<sxh js;highlight:[1,2,6,10]>
app.run(['$rootScope',function($rootScope) {
  $rootScope.appName="Gestión de seguros médicos";
}]);

app.controller("ControllerA",["$scope",function($scope) {

}]);

app.controller("ControllerB",["$scope",function($scope) {

}]);
</sxh>
  * Línea 1: Creamos el bloque run.
  * Línea 2: Definimos la propiedad ''appName''.
  * Línea 6 y 10: Estas líneas están vacías ya que no hace falta definir la propiedad ''appName'' en cada controlador.


<note tip>Recuerda, el mejor sitio para inicializar el ''$rootScope'' es en un [[unidades:03_servicios:04_tiposservicios#bloque_run|bloque run]]</note>
===== Servicio =====

Pero como ya hemos dicho está un poco mal tener valores que sean constantes directamente en [[unidades:03_servicios:04_tiposservicios#bloque_run|bloques run]] o [[unidades:03_servicios:04_tiposservicios#bloque_config|bloques config]]. Así que vamos a crear un [[unidades:03_servicios:06_value|value]] para guardar el valor.

<sxh js;highlight:[1,3,4]>
app.value("appName",""Gestión de seguros médicos"");

app.run(['$rootScope','appName',function($rootScope,appName) {
  $rootScope.appName=appName;
}]);

app.controller("ControllerA",["$scope",function($scope) {

}]);

app.controller("ControllerB",["$scope",function($scope) {

}]);
</sxh>

  * Linea 1: Definimos el servicio de tipo ''value'' con el valor de ''appName''.
  * Línea 3: Inyectamos el valor del servicio ''appName'' en el bloque run.
  * Línea 4: Asignamos el valor del servicio a la propiedad ''appName''.

Este último cambio parece un poco tonto ya que hemos movido el valor del bloque run al ''value. Realmente es necesario ya que de esa forma podremos usar el valor de ''appName'' en otros sitios además del bloque run.