Variables globales en AngularJS

Si solo desea almacenar un valor, de acuerdo con la documentación de Angular en Proveedores , debe usar la receta de valor:

var myApp = angular.module('myApp', []);
myApp.value('clientId', 'a12345654321x');

Luego úsalo en un controlador como este:

myApp.controller('DemoController', ['clientId', function DemoController(clientId) {
    this.clientId = clientId;
}]);

Lo mismo se puede lograr usando un Proveedor, Fábrica o Servicio, ya que son "solo azúcar sintáctico encima de una receta de proveedor", pero usando Valor logrará lo que desea con una sintaxis mínima.

La otra opción es usar $rootScope, pero no es realmente una opción porque no deberías usarlo por las mismas razones por las que no deberías usar variables globales en otros idiomas. Es aconsejado que se use con moderación.

Dado que todos los ámbitos heredan de $rootScope, si tiene una variable $rootScope.data y alguien olvida que data ya está definido y crea $scope.data en un ámbito local, se encontrará con problemas.

Si desea modificar este valor y mantenerlo en todos sus controladores, use un objeto y modifique las propiedades teniendo en cuenta Javascript is pass by "copia de una referencia":

myApp.value('clientId', { value: 'a12345654321x' });
myApp.controller('DemoController', ['clientId', function DemoController(clientId) {
    this.clientId = clientId;
    this.change = function(value) {
        clientId.value = 'something else';
    }
}];

Ejemplo JSFiddle

Ejemplo de AngularJS "variables globales" usando $rootScope:

El controlador 1 establece la variable global:

function MyCtrl1($scope, $rootScope) {
    $rootScope.name = 'anonymous'; 
}

El controlador 2 lee la variable global:

function MyCtrl2($scope, $rootScope) {
    $scope.name2 = $rootScope.name; 
}

Aquí hay un jsFiddle que funciona: http://jsfiddle.net/natefriedman/3XT3F/1 /

En el interés de añadir otra idea al pool wiki, pero qué pasa con AngularJS' value y constant ¿módulos? Solo estoy empezando a usarlos yo mismo, pero me parece que estas son probablemente las mejores opciones aquí.

Nota: en el momento de escribir esto, Angular 1.3.7 es el último estable, creo que estos fueron añadidos en 1.2.0, aunque no lo he confirmado con el registro de cambios.

Dependiendo de cuántos necesite definir, es posible que desee crear un archivo separado para ellos. Pero generalmente defino estos justo antes del bloque .config() de mi aplicación para facilitar el acceso. Debido a que estos todavía son módulos de manera efectiva, deberá confiar en la inyección de dependencias para usarlos, pero se consideran "globales" para su módulo de aplicación.

Por ejemplo:

angular.module('myApp', [])
  .value('debug', true)
  .constant('ENVIRONMENT', 'development')
  .config({...})

Luego dentro de cualquier controlador:

angular.module('myApp')
  .controller('MainCtrl', function(debug, ENVIRONMENT), {
    // here you can access `debug` and `ENVIRONMENT` as straight variables
  })

De la pregunta inicial en realidad suena como propiedades estáticas se requieren aquí de todos modos, ya sea como mutable (valor) o final (constante). Es más mi opinión personal que cualquier otra cosa, pero encuentro que colocar elementos de configuración de tiempo de ejecución en $rootScope se vuelve demasiado desordenado, demasiado rápido.

// app.js or break it up into seperate files
// whatever structure is your flavor    
angular.module('myApp', [])    

.constant('CONFIG', {
    'APP_NAME' : 'My Awesome App',
    'APP_VERSION' : '0.0.0',
    'GOOGLE_ANALYTICS_ID' : '',
    'BASE_URL' : '',
    'SYSTEM_LANGUAGE' : ''
})

.controller('GlobalVarController', ['$scope', 'CONFIG', function($scope, CONFIG) {

    // If you wish to show the CONFIG vars in the console:
    console.log(CONFIG);

    // And your CONFIG vars in .constant will be passed to the HTML doc with this:
    $scope.config = CONFIG;
}]);

En su HTML:

<span ng-controller="GlobalVarController">{{config.APP_NAME}} | v{{config.APP_VERSION}}</span>

Por favor, corríjame si me equivoco, pero cuando se lance Angular 2.0 no creo que$rootScope esté disponible. Mi conjetura se basa en el hecho de que $scope está siendo eliminado. Obviamente, los controladores seguirán existiendo, pero no de la manera ng-controller.Piense en inyectar controladores en las directivas en su lugar. Como el lanzamiento viene inminente, será mejor usar servicios como variables globales si desea un momento más fácil para cambiar de versión 1.X a 2.0.

localStorage.username = 'blah'

Si está garantizado que estará en un navegador moderno. Aunque sepa que sus valores se convertirán en cadenas.

También tiene el práctico beneficio de ser almacenado en caché entre recargas.

También puede usar la variable de entorno $window para que una variable global declare fuera de un controlador pueda verificarse dentro de un $watch

var initWatch = function($scope,$window){
    $scope.$watch(function(scope) { return $window.globalVar },
        function(newValue) {
            $scope.updateDisplayedVar(newValue);
    });
}

Por lo tanto, el ciclo de compendio es más largo con estos valores globales, por lo que no siempre se actualiza en tiempo real. Necesito investigar en ese tiempo de resumen con esta configuración.

Acabo de encontrar otro método por error :

Lo que hice fue declarar una var db = null declaración de la aplicación anterior y luego modificarla en el app.js luego cuando accedí a ella en el controller.js Pude acceder a él sin ningún problema.Puede haber algunos problemas con este método que no soy consciente de, pero es una buena solución, supongo.

Pruebe esto, no forzará a inyectar $rootScope en el controlador.

app.run(function($rootScope) {
    $rootScope.Currency = 'USD';
});

Solo puede usarlo en run block porque config block no le proporcionará usar el servicio de $rootScope.

En realidad es bastante fácil. (Si estás usando Angular 2 + de todos modos.)

Simplemente agregue

declare var myGlobalVarName;

En algún lugar en la parte superior de su archivo de componente (como después de las instrucciones "import"), y podrá acceder a "myGlobalVarName" en cualquier lugar dentro de su componente.

También puedes hacer algo como esto ..

function MyCtrl1($scope) {
    $rootScope.$root.name = 'anonymous'; 
}

function MyCtrl2($scope) {
    var name = $rootScope.$root.name;
}