Variables globales dans AngularJS

Question

J'ai un problème où j'initialise une variable sur la portée dans 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 limiter 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 est que le contrôleur qui l'initialise, est appelé à nouveau par Angular et remet la variable à sa valeur initiale.

Je suppose que ce n'est pas la bonne façon de déclarer et d'initialiser les variables globales, car elles ne sont pas vraiment globales. Ma question est donc la suivante : quelle est la bonne façon de procéder et existe-t-il de bons exemples qui fonctionnent avec la version actuelle d'Angular ?

Answer 1

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

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

$rootScope est le parent de tous les scopes, de sorte que les valeurs qui y sont exposées seront visibles dans tous les modèles et contrôleurs. En utilisant l'option $rootScope est très facile car il suffit de l'injecter dans n'importe quel contrôleur et de modifier les valeurs dans cette portée. C'est peut-être pratique mais il y a tous les inconvénients de la problèmes des variables globales .

Les services sont des singletons que vous pouvez injecter dans n'importe quel contrôleur et exposer leurs valeurs dans la portée d'un contrôleur. Les services, étant des singletons, sont toujours "globaux" mais vous avez un bien meilleur contrôle sur l'endroit où ils sont utilisés et exposés.

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'
  };
});

et ensuite dans un contrôleur :

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

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

Answer 2

Si vous voulez simplement stocker une valeur, selon la norme Documentation Angular sur les fournisseurs vous devez utiliser la recette Value :

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

Utilisez-le ensuite dans un contrôleur comme celui-ci :

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

La même chose peut être obtenue à l'aide d'un fournisseur, d'une usine ou d'un service puisqu'il s'agit de "sucre syntaxique sur une recette de fournisseur", mais l'utilisation de Value permet d'obtenir ce que vous voulez avec une syntaxe minimale.

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

Puisque tous les scopes héritent de $rootScope si vous avez une variable $rootScope.data et quelqu'un oublie que data est déjà défini et crée $scope.data dans une portée locale, vous rencontrerez des problèmes.

---

Si vous voulez modifier cette valeur et la faire persister dans tous vos contrôleurs, utilisez un objet et modifiez les propriétés en gardant à l'esprit que le Javascript est transmis par la fonction "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 de JSFiddle

Answer 3

Exemple d'utilisation des "variables globales" d'AngularJS $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/

Answer 4

localStorage.username = 'blah'

Si vous êtes sûr d'être sur un navigateur moderne. Mais sachez que vos valeurs seront toutes transformées en chaînes de caractères.

Il a également l'avantage pratique d'être mis en cache entre les rechargements.

Answer 5

Vous pouvez aussi faire quelque chose comme ceci .

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

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