AngularJS'de global değişkenler

Bir denetleyicideki kapsamda bir değişkeni başlatan bir sorunum var. Daha sonra bir kullanıcı oturum açtığında başka bir denetleyicide değiştirilir. Bu değişken, gezinme çubuğu gibi şeyleri kontrol etmek için kullanılır ve kullanıcının türüne bağlı olarak sitenin bölümlerine erişimi kısıtlar, bu nedenle değerini tutması önemlidir. Bununla ilgili sorun, onu başlatan denetleyicinin açısal bir şekilde tekrar çağrılması ve daha sonra değişkeni ilk değerine sıfırlamasıdır.

Bunun küresel değişkenleri ilan etmenin ve başlatmanın doğru yolu olmadığını, aslında küresel olmadığını varsayıyorum, bu yüzden sorum doğru yol nedir ve bu açısalın mevcut sürümü ile ilgili iyi örnekler var mı?

Temel olarak "global" değişkenler için 2 seçeneğiniz vardır:

• http://docs.angularjs.org/api/ng.$rootScope kullanın$rootScope
• bir hizmet kullanın http://docs.angularjs.org/guide/services

$rootScopetüm kapsamların bir üst öğesidir, bu nedenle burada ortaya çıkan değerler tüm şablonlarda ve denetleyicilerde görünür olur. $rootScopeBunu kullanmak çok kolaydır, çünkü herhangi bir denetleyiciye enjekte edebilir ve bu kapsamdaki değerleri değiştirebilirsiniz. Uygun olabilir, ancak küresel değişkenlerin tüm problemlerine sahiptir .

Hizmetler, herhangi bir denetleyiciye enjekte edebileceğiniz ve denetleyicinin kapsamındaki değerlerini gösterebileceğiniz tek öğelerdir. Hizmetler, singleton olmak hala 'küresel' olmakla birlikte, bunların kullanıldığı ve maruz kaldığı yerler üzerinde çok daha iyi bir kontrole sahipsiniz.

Hizmetleri kullanmak biraz daha karmaşık, ama o kadar değil, işte bir örnek:

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

ve sonra bir denetleyicide:

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

İşte çalışan jsFiddle: http://jsfiddle.net/pkozlowski_opensource/BRWPM/2/

Yalnızca bir değeri saklamak istiyorsanız , Sağlayıcılardaki Açısal belgelere göre , Değer tarifini kullanmalısınız:

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

Sonra böyle bir denetleyicide kullanın:

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

Aynı şey, bir Sağlayıcı, Fabrika veya Hizmet kullanılarak da sağlanabilir, çünkü bunlar sadece bir sağlayıcı tarifinin üstünde sadece sözdizimsel şekerdir, ancak Value'i kullanmak en az sözdizimi ile istediğinizi elde edecektir.

Diğer seçenek kullanmaktır $rootScope, ancak gerçekten bir seçenek değildir, çünkü aynı nedenlerle kullanmamalısınız, global değişkenleri diğer dillerde kullanmamalısınız. Onun az kullanılması tavsiye edilir .

Tüm kapsamlar devralındığından $rootScope, bir değişkeniniz varsa $rootScope.datave datadaha önce tanımlanmış ve $scope.datayerel bir kapsamda oluşturulan birini unutursanız sorun yaşarsınız.

Bu değeri değiştirmek ve tüm denetleyicilerinizde kalıcı olmasını istiyorsanız, bir nesne kullanın ve özellikleri göz önünde bulundurarak değiştirin Javascript "başvurunun kopyası" ile geçirilir :

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

JSFiddle örneği

AngularJS "global değişkenleri" kullanarak örnek $rootScope :

Denetleyici 1 genel değişkeni ayarlar:

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

Denetleyici 2 genel değişkeni okur:

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

İşte çalışan bir jsFiddle: http://jsfiddle.net/natefriedman/3XT3F/1/

Wiki havuzuna başka bir fikir eklemek için, Peki ya AngularJS ' valueve constantmodülleri? Onları sadece kendim kullanmaya başlıyorum, ama bu bana muhtemelen en iyi seçenek gibi geliyor.

Not: yazma zamanı itibariyle, açısal 1.3.7 son kararlı, bunların 1.2.0'da eklendiğine inanıyorum, bunu changelog ile doğrulamamıştım.

Kaç tanesini tanımlamanız gerektiğine bağlı olarak, bunlar için ayrı bir dosya oluşturmak isteyebilirsiniz. Ancak bunları genellikle uygulamamın hemen öncesinden tanımlarım.config() kolay erişim için engellemesinden . Bunlar hala etkili modüller olduğundan, bunları kullanmak için bağımlılık enjeksiyonuna güvenmeniz gerekir, ancak bunlar uygulama modülünüz için "global" olarak kabul edilir.

Örneğin:

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

Sonra herhangi bir denetleyicinin içinde:

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

İlk sorudan aslında burada mutable (değer) veya final (sabit) olarak statik özellikler gerekli gibi geliyor. Kişisel fikrim her şeyden daha fazla, ancak çalışma zamanı yapılandırma öğelerini $rootScopeçok hızlı, çok dağınık hale getiriyor.

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

HTML'nizde:

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

localStorage.username = 'blah'

Modern bir tarayıcıda olduğunuz garanti edilirse. Gerçi değerlerinizin hepsi dizgeye dönüştürülecektir.

Ayrıca yeniden yüklemeler arasında önbelleğe alınma gibi kullanışlı bir yararı vardır.

Yanılıyorsam lütfen beni düzeltin, ancak Angular 2.0 piyasaya çıktığında $rootScopeetrafta olacağına inanmıyorum . Benim varsayımım $scopeda kaldırılmakta olan gerçeğe dayanıyor . Açıkçası kontrolörler, sadece ng-controllermoda değil, hala var olacak . Bunun yerine kontrolörleri direktiflere enjekte etmeyi düşünün. Sürüm yaklaştıkça, 1.X'den 2.0 sürümüne geçmek için daha kolay bir zaman istiyorsanız hizmetleri global değişkenler olarak kullanmak en iyisi olacaktır.

Ortam değişkenini ayrıca $windowbir denetleyicinin dışındaki bir genel değişken bildiriminin,$watch

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

Dikkat edin, sindirim döngüsü bu küresel değerlerle daha uzundur, bu nedenle her zaman gerçek zamanlı güncellenmez. Bu yapılandırma ile bu özet zamanı araştırmam gerekiyor.

Yanlışlıkla başka bir yöntem buldum:

Benim yaptığım bir ilan etmek oldu var db = nullyukarıdaki uygulama beyanı ve sonra onu modifiye app.jsiçinde bunu erişildiğinde sonra controller.js ben farkında değilim bu yöntemle bazı sorunlar olabilecek problem.there olmadan ulaşabilecek ama O var iyi bir çözüm sanırım.

Bunu deneyin, $rootScopekontrolöre enjekte etmeye zorlamayacaksınız .

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

Yapılandırma bloğu size $ rootScope hizmetini kullanmanızı sağlamadığından, yalnızca run bloğunda kullanabilirsiniz.

Aslında oldukça kolay. (Yine de Angular 2+ kullanıyorsanız.)

Basitçe ekleyin

declare var myGlobalVarName;

Bileşen dosyanızın üstünde bir yerde ("içe aktarma" ifadelerinden sonra olduğu gibi) ve bileşeninizin herhangi bir yerinde "myGlobalVarName" öğesine erişebileceksiniz.

Bunun gibi bir şey de yapabilirsiniz ..

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

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