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 ¹⁾. 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í:

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"
}]);

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 bloque run.

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) {

}]);

• 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.

Pero como ya hemos dicho está un poco mal tener valores que sean constantes directamente en bloques run o bloques config. Así que vamos a crear un value para guardar el valor.

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) {

}]);

• 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.