4.11 $rootScope

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 el 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 mas un servicio podemos tener lo mejor de ambos mundos.

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

El códigi 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 como 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 mas si hubiera mas controladores) usando $rootScope y definiendo la propiedad appName en él.

Para definir una única vez la propiedad y fuera 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 valor 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="Gestión de seguros médicos";
}]);

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

}]);

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

}]);