Variabili globali in AngularJS

Ho un problema in cui sto inizializzando una variabile nell'ambito di un controller. Quindi viene modificato in un altro controller quando un utente accede. Questa variabile viene utilizzata per controllare elementi come la barra di navigazione e limita l'accesso alle parti del sito in base al tipo di utente, quindi è importante che mantenga il suo valore. Il problema è che il controller che lo inizializza, viene richiamato di nuovo da angular come e quindi reimposta la variabile al suo valore iniziale.

Presumo che questo non sia il modo corretto di dichiarare e inizializzare le variabili globali, beh non è proprio globale, quindi la mia domanda è qual è il modo corretto e ci sono buoni esempi in giro che funzionano con l'attuale versione di angolare?

Hai sostanzialmente 2 opzioni per le variabili "globali":

• utilizzare un $rootScope http://docs.angularjs.org/api/ng.$rootScope
• utilizzare un servizio http://docs.angularjs.org/guide/services

$rootScopeè un genitore di tutti gli ambiti, quindi i valori esposti lì saranno visibili in tutti i modelli e controller. L'uso di $rootScopeè molto semplice in quanto puoi semplicemente iniettarlo in qualsiasi controller e modificare i valori in questo ambito. Potrebbe essere conveniente ma ha tutti i problemi delle variabili globali .

I servizi sono singoli punti che è possibile iniettare in qualsiasi controller ed esporre i loro valori nell'ambito di un controller. I servizi, essendo i singoli, sono ancora "globali", ma hai un controllo molto migliore su dove vengono utilizzati ed esposti.

L'uso dei servizi è un po 'più complesso, ma non molto, ecco un esempio:

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

e quindi in un controller:

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

Ecco il jsFiddle funzionante: http://jsfiddle.net/pkozlowski_opensource/BRWPM/2/

Se si desidera solo memorizzare un valore, in base alla documentazione Angolare sui provider , è necessario utilizzare la ricetta Valore:

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

Quindi usalo in un controller come questo:

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

La stessa cosa può essere raggiunta usando un fornitore, una fabbrica o un servizio poiché sono "solo zucchero sintattico in cima a una ricetta del fornitore", ma usando Value si otterrà ciò che si desidera con una sintassi minima.

L'altra opzione è usare $rootScope, ma non è davvero un'opzione perché non dovresti usarla per gli stessi motivi per cui non dovresti usare variabili globali in altre lingue. Si consiglia di usarlo con parsimonia.

Poiché tutti gli ambiti ereditano da $rootScope, se si dispone di una variabile $rootScope.datae qualcuno dimentica che dataè già definito e crea $scope.datain un ambito locale, si verificheranno problemi.

Se vuoi modificare questo valore e farlo persistere su tutti i tuoi controller, usa un oggetto e modifica le proprietà tenendo presente che Javascript è passato da "copia di un riferimento" :

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

JS Esempio di violino

Esempio di "variabili globali" di AngularJS usando $rootScope:

Il controller 1 imposta la variabile globale:

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

Il controller 2 legge la variabile globale:

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

Ecco un jsFiddle funzionante: http://jsfiddle.net/natefriedman/3XT3F/1/

Nell'interesse di aggiungere un'altra idea al pool di wiki, ma che dire di AngularJS valuee dei constantmoduli? Sto solo iniziando a usarli da solo, ma mi sembra che queste siano probabilmente le migliori opzioni qui.

Nota: al momento della stesura di questo articolo, Angular 1.3.7 è l'ultimo stabile, credo che questi siano stati aggiunti in 1.2.0, ma non l'ho confermato con il log delle modifiche.

A seconda di quanti ne devi definire, potresti creare un file separato per loro. Ma generalmente li definisco appena prima del .config()blocco della mia app per un facile accesso. Poiché si tratta ancora di moduli efficaci, per utilizzarli dovrai fare affidamento sull'iniezione di dipendenza, ma sono considerati "globali" per il modulo dell'app.

Per esempio:

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

Quindi all'interno di qualsiasi controller:

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

Dalla domanda iniziale in realtà sembra che qui siano richieste proprietà statiche, sia come mutabili (valore) che finali (costanti). È più la mia opinione personale di ogni altra cosa, ma trovo che posizionare gli elementi della configurazione di runtime su $rootScopediventi troppo disordinato, troppo rapidamente.

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

Nel tuo HTML:

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

localStorage.username = 'blah'

Se sei sicuro di essere su un browser moderno. Anche se sai che i tuoi valori saranno tutti trasformati in stringhe.

Ha anche il pratico vantaggio di essere memorizzato nella cache tra le ricariche.

Per favore, correggimi se sbaglio, ma quando viene rilasciato Angular 2.0 non credo che $rootScopeci sarà. La mia congettura si basa anche sul fatto che $scopeviene rimosso. Ovviamente i controller continueranno a esistere, ma non nella ng-controllermoda. Pensa invece di iniettare i controller nelle direttive. Poiché la versione arriverà imminente, sarà meglio usare i servizi come variabili globali se si desidera un tempo più semplice per passare dalla versione 1.X alla 2.0.

È inoltre possibile utilizzare la variabile di ambiente in $windowmodo che una variabile globale dichiarata all'esterno di un controller possa essere verificata all'interno di a$watch

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

Inoltre, il ciclo digest è più lungo con questi valori globali, quindi non è sempre aggiornato in tempo reale. Ho bisogno di indagare su quel tempo digest con questa configurazione.

Ho appena trovato un altro metodo per errore:

Quello che ho fatto è stato dichiarare una var db = nulldichiarazione dell'app precedente e poi modificarla in quel app.jsmomento, quando l'ho acceduta, controller.js sono stata in grado di accedervi senza alcun problema. Potrebbero esserci problemi con questo metodo di cui non sono a conoscenza ma è una buona soluzione immagino.

Prova questo, non forzerai l'iniezione $rootScopenel controller.

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

Puoi usarlo solo nel blocco di esecuzione perché il blocco di configurazione non ti fornirà il servizio di $ rootScope.

In realtà è abbastanza facile. (Se stai usando Angular 2+ comunque.)

Aggiungi semplicemente

declare var myGlobalVarName;

Da qualche parte nella parte superiore del file del componente (ad esempio dopo le istruzioni "import"), e sarai in grado di accedere a "myGlobalVarName" ovunque all'interno del componente.

Puoi anche fare qualcosa del genere ..

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

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