AngularJSのグローバル変数

コントローラのスコープで変数を初期化しているときに問題が発生します。次に、ユーザーがログインすると、別のコントローラーで変更されます。この変数は、ナビゲーションバーなどの制御に使用され、ユーザーのタイプに応じてサイトの一部へのアクセスを制限するため、その値を保持することが重要です。それに関する問題は、それを初期化するコントローラーがなんらかの角度で再び呼び出され、変数を初期値にリセットすることです。

これはグローバル変数を宣言して初期化する正しい方法ではなく、実際にはグローバルではないので、私の質問は正しい方法は何ですか？現在のバージョンのangularで動作する良い例はありますか？

「グローバル」変数には基本的に2つのオプションがあります。

• http://docs.angularjs.org/api/ng.$ro​​otScopeを使用し$rootScope ます
• サービスを使用するhttp://docs.angularjs.org/guide/services

$rootScopeはすべてのスコープの親であるため、そこで公開された値はすべてのテンプレートとコントローラーで表示されます。$rootScope任意のコントローラーに注入し、このスコープの値を変更できるので、の使用は非常に簡単です。便利かもしれませんが、グローバル変数のすべての問題があります。

サービスは、任意のコントローラーに注入してその値をコントローラーのスコープに公開できるシングルトンです。シングルトンであるサービスは依然として「グローバル」ですが、それらが使用され、公開される場所をはるかに制御できます。

サービスの使用は少し複雑ですが、それほど多くはありません。以下に例を示します。

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

そしてコントローラで：

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

これが動作しているjsFiddleです：http ://jsfiddle.net/pkozlowski_opensource/BRWPM/2/

値を保存するだけの場合は、プロバイダーに関するAngularのドキュメントに従って、値のレシピを使用する必要があります。

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

次に、次のようなコントローラーで使用します。

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

同じことは、プロバイダー、ファクトリー、またはサービスを使用して実現できます。これらは「プロバイダーレシピの上の構文糖」にすぎないためです。ただし、Valueを使用すると、最小限の構文で必要な結果を得ることができます。

もう1つのオプションはを使用する$rootScopeことですが、他の言語でグローバル変数を使用してはならないのと同じ理由で使用すべきではないため、実際にはオプションではありません。慎重に使用することをお勧めします。

すべてのスコープはから継承されるため$rootScope、変数が$rootScope.dataあり、誰かdataがすでに定義されていることを忘れて$scope.dataローカルスコープで作成した場合、問題が発生します。

この値を変更して、すべてのコントローラーで永続化したい場合は、オブジェクトを使用してプロパティを変更します。JavaScriptは「参照のコピー」によって渡されることに注意してください。

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

JSFiddleの例

AngularJS「グローバル変数」の例$rootScope：

コントローラー1がグローバル変数を設定します。

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

コントローラー2はグローバル変数を読み取ります。

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

これが動作しているjsFiddleです：http ://jsfiddle.net/natefriedman/3XT3F/1/

Wikiプールに別のアイデアを追加するために、AngularJS valueとconstantモジュールですか？私はそれらを自分で使い始めたばかりですが、おそらくこれらがここでの最良のオプションであるように思えます。

注：執筆時点では、Angular 1.3.7が最新の安定版です。これらは1.2.0で追加されたと思いますが、変更ログでこれを確認していません。

定義する必要がある数に応じて、それらのために個別のファイルを作成することができます。しかし、私は通常、アプリの前にこれらを定義します.config()、簡単にアクセスできるようブロックのます。これらは依然として実質的にモジュールであるため、依存関係の注入に依存して使用する必要がありますが、アプリモジュールに対して「グローバル」と見なされます。

例えば：

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

次に、任意のコントローラ内：

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

最初の質問から、実際には、可変プロパティ（値）または最終プロパティ（定数）のいずれかとして静的プロパティがここで必要とされるように聞こえます。何よりも個人的な意見ですが、ランタイム構成アイテムをに配置するの$rootScopeが面倒になりすぎて、早すぎます。

// 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で：

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

localStorage.username = 'blah'

最新のブラウザを使用していることが保証されている場合。ただし、値はすべて文字列に変換されます。

リロードの間にキャッシュされるという便利な利点もあります。

私が間違っている場合は修正してください。しかし、Angular 2.0がリリースされたとき、私は$rootScope周りにいるとは思いません。私の推測は$scope、同様に削除されているという事実に基づいています。明らかに、コントローラーはまだ存在しますが、ng-controller流行ではありません。代わりにコントローラーをディレクティブに注入することを考えてください。リリースが間近に迫っているので、verison 1.Xから2.0に簡単に切り替えたい場合は、サービスをグローバル変数として使用するのが最適です。

また、環境変数を使用して$window、コントローラの外部で宣言されているグローバル変数を内部でチェックできるようにすることもできます。$watch

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

注意してください。ダイジェストサイクルはこれらのグローバル値の方が長いため、常にリアルタイムで更新されるとは限りません。この構成でダイジェスト時間を調査する必要があります。

私は誤って別の方法を見つけました：

私がしたことは、var db = null上記のアプリ宣言を宣言し、app.jsそのときにそれを変更するcontroller.js ことでした。私がそれにアクセスしたとき、問題なくそれにアクセスできました。このメソッドには気付かないいくつかの問題があるかもしれませんが、私が推測する良い解決策。

これを試してください、あなたは$rootScopeコントローラに注入することを強制しません。

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

configブロックでは$ rootScopeのサービスを使用することはできないため、runブロックでのみ使用できます。

それは実際にはかなり簡単です。（とにかくAngular 2+を使用している場合。）

追加するだけ

declare var myGlobalVarName;

コンポーネントファイルの上部のどこかに（ "import"ステートメントの後など）、コンポーネント内の任意の場所にある "myGlobalVarName"にアクセスできます。

このようなこともできます。

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

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