¡Esta es una revisión vieja del documento!
El $rootScope
es el scope
del que heredan el resto de los scopes que usamos en los controladores 1). 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) { }]);
appName
.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) { }]);