Variables globales dans AngularJS

J'ai un problème où j'initialise une variable sur la portée d'un contrôleur. Elle est ensuite modifiée dans un autre contrôleur lorsqu'un utilisateur se connecte. Cette variable est utilisée pour contrôler des éléments tels que la barre de navigation et restreint l'accès à certaines parties du site en fonction du type d'utilisateur, il est donc important qu'elle conserve sa valeur. Le problème avec cela est que le contrôleur qui l'initialise, est rappelé par un certain angulaire puis réinitialise la variable à sa valeur initiale.

Je suppose que ce n'est pas la bonne façon de déclarer et d'initialiser des variables globales, eh bien ce n'est pas vraiment global, donc ma question est quelle est la bonne façon et y a-t-il de bons exemples qui fonctionnent avec la version actuelle d'angular?

Vous avez essentiellement 2 options pour les variables "globales":

• utiliser un $rootScope http://docs.angularjs.org/api/ng.$rootScope
• utiliser un service http://docs.angularjs.org/guide/services

$rootScopeest un parent de toutes les étendues, les valeurs qui y sont exposées seront donc visibles dans tous les modèles et contrôleurs. L'utilisation de $rootScopeest très simple car vous pouvez simplement l'injecter dans n'importe quel contrôleur et modifier les valeurs dans cette étendue. Cela peut être pratique mais présente tous les problèmes des variables globales .

Les services sont des singletons que vous pouvez injecter à n'importe quel contrôleur et exposer leurs valeurs dans la portée d'un contrôleur. Les services, en tant que singletons, sont toujours «mondiaux» mais vous avez un bien meilleur contrôle sur leur utilisation et leur exposition.

L'utilisation des services est un peu plus complexe, mais pas tant que ça, voici un exemple:

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

puis dans un contrôleur:

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

Voici le jsFiddle qui fonctionne: http://jsfiddle.net/pkozlowski_opensource/BRWPM/2/

Si vous souhaitez simplement stocker une valeur, selon la documentation Angular sur les fournisseurs , vous devez utiliser la recette Value:

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

Ensuite, utilisez-le dans un contrôleur comme celui-ci:

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

La même chose peut être obtenue en utilisant un fournisseur, une usine ou un service car ils ne sont «que du sucre syntaxique en plus d'une recette de fournisseur», mais en utilisant Value, vous obtiendrez ce que vous voulez avec une syntaxe minimale.

L'autre option est d'utiliser $rootScope, mais ce n'est pas vraiment une option parce que vous ne devriez pas l'utiliser pour les mêmes raisons que vous ne devriez pas utiliser de variables globales dans d'autres langues. Il est conseillé de l'utiliser avec parcimonie.

Étant donné que toutes les étendues héritent de $rootScope, si vous avez une variable $rootScope.dataet que quelqu'un oublie qui dataest déjà défini et crée $scope.datadans une étendue locale, vous rencontrerez des problèmes.

Si vous souhaitez modifier cette valeur et la faire persister sur tous vos contrôleurs, utilisez un objet et modifiez les propriétés en gardant à l'esprit que Javascript est passé par "copie d'une référence" :

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

Exemple JSFiddle

Exemple de "variables globales" AngularJS utilisant $rootScope:

Le contrôleur 1 définit la variable globale:

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

Le contrôleur 2 lit la variable globale:

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

Voici un jsFiddle fonctionnel: http://jsfiddle.net/natefriedman/3XT3F/1/

Dans l'intérêt d'ajouter une autre idée au pool wiki, mais qu'en est-il d'AngularJS valueet des constantmodules? Je commence à peine à les utiliser moi-même, mais il me semble que ce sont probablement les meilleures options ici.

Remarque: au moment de la rédaction, Angular 1.3.7 est la dernière version stable, je pense que ceux-ci ont été ajoutés dans 1.2.0, mais ne l'ont pas confirmé avec le journal des modifications.

Selon le nombre à définir, vous souhaiterez peut-être créer un fichier distinct pour eux. Mais je les définis généralement juste avant le .config()blocage de mon application pour un accès facile. Étant donné qu'il s'agit toujours de modules efficaces, vous devrez vous fier à l'injection de dépendances pour les utiliser, mais ils sont considérés comme «globaux» pour votre module d'application.

Par exemple:

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

Puis à l'intérieur de n'importe quel contrôleur:

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

De la question initiale est en fait des sons comme des propriétés statiques sont nécessaires ici de toute façon, soit comme mutable (valeur) ou finale (constante). C'est plus mon opinion personnelle qu'autre chose, mais je trouve que placer des éléments de configuration d'exécution sur le $rootScopedevient trop compliqué, trop rapidement.

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

Dans votre HTML:

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

localStorage.username = 'blah'

Si vous êtes assuré d'être sur un navigateur moderne. Mais sachez que vos valeurs seront toutes transformées en chaînes.

A également l'avantage d'être mis en cache entre les rechargements.

Veuillez me corriger si je me trompe, mais quand Angular 2.0 sera disponible, je ne pense pas que ce $rootScopesera le cas. Ma conjecture est basée sur le fait que cela $scopeest également supprimé. De toute évidence, les contrôleurs existeront toujours, mais pas à la mode. ng-controllerPensez plutôt à injecter des contrôleurs dans les directives. Au fur et à mesure que la version arrive, il est préférable d'utiliser les services comme variables globales si vous souhaitez passer plus facilement de la version 1.X à la version 2.0.

Vous pouvez également utiliser la variable d'environnement $windowafin qu'une variable globale déclare à l'extérieur d'un contrôleur puisse être vérifiée à l'intérieur d'un$watch

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

Attention, le cycle de résumé est plus long avec ces valeurs globales, il n'est donc pas toujours mis à jour en temps réel. Je dois enquêter sur ce temps de résumé avec cette configuration.

Je viens de trouver une autre méthode par erreur:

Ce que j'ai fait était de déclarer une var db = nulldéclaration d'application ci - dessus, puis de la modifier dans le app.jspuis lorsque j'y ai accédé dans le controller.js j'ai pu y accéder sans aucun problème. Il pourrait y avoir des problèmes avec cette méthode que je ne connais pas, mais c'est une bonne solution, je suppose.

Essayez ceci, vous ne forcerez pas à injecter $rootScopedans le contrôleur.

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

Vous ne pouvez l'utiliser que dans le bloc d'exécution car le bloc de configuration ne vous fournira pas d'utiliser le service de $ rootScope.

C'est en fait assez simple. (Si vous utilisez Angular 2+ de toute façon.)

Ajoutez simplement

declare var myGlobalVarName;

Quelque part en haut de votre fichier de composant (comme après les instructions "import"), et vous pourrez accéder à "myGlobalVarName" n'importe où à l'intérieur de votre composant.

Vous pouvez également faire quelque chose comme ça ..

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

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