globales - variable global angularjs

Variables globales en AngularJS

Question

Tengo un problema donde estoy inicializando una variable en el alcance en un controlador. Luego se cambia en otro controlador cuando un usuario inicia sesión. Esta variable se usa para controlar cosas como la barra de navegación y restringe el acceso a partes del sitio según el tipo de usuario, por lo que es importante que mantenga su valor. El problema con esto es que el controlador que lo inicializa, recibe llamadas de nuevo de forma angular y luego restablece la variable a su valor inicial.

Supongo que esta no es la forma correcta de declarar e inicializar variables globales, bueno, no es realmente global, por lo que mi pregunta es ¿cuál es la forma correcta?

Answer 1

Acabo de encontrar otro método por error:

Lo que hice fue declarar una var db = null sobre la declaración de la aplicación y luego la modifiqué en app.js luego, cuando app.js a ella en controller.js , pude acceder a ella sin ningún problema. Puede haber algunos problemas con esto. método que no conozco, pero supongo que es una buena solución.

Answer 2

Básicamente tienes 2 opciones para variables "globales":

• use $rootScope http://docs.angularjs.org/api/ng.$rootScope
• use un servicio http://docs.angularjs.org/guide/services

$rootScope es un padre de todos los ámbitos, por lo que los valores expuestos allí serán visibles en todas las plantillas y controladores. Usar $rootScope es muy fácil, ya que simplemente puede inyectarlo en cualquier controlador y cambiar los valores en este ámbito. Puede ser conveniente pero tiene todos los problemas de las variables globales .

Los servicios son singletons que puede inyectar a cualquier controlador y exponer sus valores en el alcance de un controlador. Los servicios, por ser singleton, siguen siendo "globales", pero tienes un mejor control sobre dónde se utilizan y exponen.

Usar servicios es un poco más complejo, pero no tanto, aquí hay un ejemplo:

var myApp = angular.module(''myApp'',[]);
myApp.factory(''UserService'', function() {
  return {
      name : ''anonymous''
  };
});

y luego en un controlador:

function MyCtrl($scope, UserService) {
    $scope.name = UserService.name;
}

Aquí está el jsFiddle de trabajo: http://jsfiddle.net/pkozlowski_opensource/BRWPM/2/

Answer 3

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

Answer 4

Ejemplo de "variables globales" de AngularJS 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/

Answer 5

En el interés de agregar otra idea al grupo de wiki, pero ¿qué pasa con el value y los módulos constant AngularJS? Apenas estoy empezando a usarlos, pero me parece que estas son probablemente las mejores opciones aquí.

Nota: en el momento de escribir este artículo, Angular 1.3.7 es el último establo, creo que se agregaron en 1.2.0, aunque no he confirmado esto con el registro de cambios.

Dependiendo de la cantidad que necesite definir, es posible que desee crear un archivo separado para ellos. Pero generalmente los defino justo antes del bloque .config() mi aplicación para facilitar el acceso. Debido a que estos son todavía módulos efectivos, necesitará confiar en la inyección de dependencia para usarlos, pero se consideran "globales" para el módulo de su 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 todos modos, la pregunta inicial es en realidad como las propiedades estáticas que se requieren aquí, ya sea como mutables (valor) o final (constante). Es más mi opinión personal que cualquier otra cosa, pero me parece que colocar elementos de configuración en tiempo de ejecución en $rootScope es demasiado complicado, demasiado rápido.

Answer 6

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

Simplemente añada

declare var myGlobalVarName;

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

Answer 7

Intente esto, no forzará la inyección de $rootScope en el controlador.

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

Solo puede usarlo en el bloque de ejecución porque el bloque de configuración no le proporcionará el uso del servicio de $ rootScope.

Answer 8

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

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

Entonces ú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áctica en la parte superior de una receta del proveedor", pero el uso de Valor logrará lo que desea con una sintaxis mínima.

La otra opción es usar $rootScope , pero en realidad no es una opción porque no debería usarla por las mismas razones por las que no debería usar variables globales en otros idiomas. Se advised ser utilizado con moderación.

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

Si desea modificar este valor y hacer que persista en todos sus controladores, use un objeto y modifique las propiedades teniendo en cuenta que Javascript se pasa por "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 de JSFiddle

Answer 9

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

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

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

Answer 10

También puedes hacer algo como esto ..

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

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

Answer 11

// 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 tu HTML:

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

Answer 12

localStorage.username = ''blah''

Si tienes la garantía de estar en un navegador moderno. Aunque sepa que sus valores se convertirán todos en cadenas.

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