AngularJSでグローバル変数（定数）を定義する２つの方法

グローバル変数とはスコープのどこからでも参照できる変数のこと

AngularJS的にいうなら、
どのコントローラ（またはビュー）からでも参照できるってことです。

ここでは、AngularJSでグローバル変数を作る方法をまとめました。

意外とやり方を忘れがちなので、自分への忘備録も兼ねて紹介します。

このページの目次

方法１．$rootScope で定義するやり方
方法２．Value recipe（バリューレシピ）を利用する方法
ここまでのまとめ

方法１．$rootScope で定義するやり方

１つめは $rootScope からグローバル変数定義するやり方

読んで字のごとく、 $rootScope は全スコープの親となるスコープです。

ここで定義した変数とか関数、それらは次の場所から参照可能になります。

全コントローラ内
全ビュー内

これを使ったグローバル変数定義するコード例は次の通り

まず次のように、コントローラに $rootScope を渡し変数を代入

app.controller('myApp',
  ['$scope', '$rootScope', function($scope, $rootScope){
    $rootScope.locale.locale = 'en_US';
  }]
);

app.controller('myApp',

['$scope', '$rootScope', function($scope, $rootScope){

$rootScope.locale.locale = 'en_US';

}]

);

上の例の場合、 $rootScope.locale.locale がグローバル変数になります。

こうやって定義しておけば、どこからでも参照できる変数のできあがり

例えばこの変数をビュー内で使うなら、そのまま {{}} で参照すればOK

<body>
  <div>
    current locale : {{locale.locale}}
  </div>
</body>

<body>

<div>

current locale : {{locale.locale}}

</div>

</body>

ビュー内ならそのまま使えるってところが便利ですね。

ただし、コントローラ内で参照するときは１つ注意点があります。

それは controller 呼び出し時に、 $rootScope を渡す必要があること

例えば次コードみたいな感じで

app.controller('HogeController',
  ['$scope', '$rootScope', function($scope, $rootScope){
    $rootScope.locale.locale = 'ja_JP';
  }]
);

app.controller('HogeController',

['$scope', '$rootScope', function($scope, $rootScope){

$rootScope.locale.locale = 'ja_JP';

}]

);

必ず $rootScope をインクルードしとかないとダメです。

それ以外は普通の $scope を使う時と同じように、

値を別のものに変更したり、
ビューの内容を書き換えたり、

こういう操作が普通にできます、特別ルールとかもありません。

方法２．Value recipe（バリューレシピ）を利用する方法

グローバル変数を定義する方法はこれだけじゃなくて、他にもあります。

それが Value recipe（バリューレシピ）から定義するやり方

あんまり聞きなれないですが、
AngularJSでは共通で使う値・関数は Value recipe から登録できます。

なのでそれを使うのも、グローバル変数を定義する１つの手です。

例えば次がグローバル変数を登録してるコード例

var app = angular.module('myApp', []);
app.value('locale', 'en_US');

1 2	var app = angular.module('myApp', []); app.value('locale', 'en_US');

こういう風に、モジュールから value というメソッドを呼び出すだけ

第１引数にはグローバル変数の名前、第２引数にはその値を渡せばOKです。

これだけで、全コントローラーから参照できる値が作れちゃいます、便利ですね～

そして実際に、コントローラーから値参照しているのが次コード例

app.controller('HogeController', 
  [ '$scope', 'locale', function($scope, locale) {
    this.locale = locale;
  }]
);

app.controller('HogeController',

[ '$scope', 'locale', function($scope, locale) {

this.locale = locale;

}]

);

このコードみたいに、 $scope に加えて定義した変数名（ここでは locale ）も渡せばいいだけ

これだけで値の参照・変更、なんでもできます。

ただし、１つ注意点があるとすれば、ビューから直接参照できないところ

もしビュー内で直に参照したいなら、
先ほどの $rootScope を使ったやり方の方がスマートだし楽だと思います。

ここまでのまとめ

ということで、ここまで紹介した方法は次の２つ

$rootScopeを使うやり方
単純にメインとなるスコープで $rootScope をインクルードし、そこに色々代入すればOK。作成した変数は全ビュー＆全コントローラーから参照可能
Value recipe を使うやり方
共通で使う値・関数はモジュールの value メソッドから定義可能。ただし Value recipe から作成した値はビュー内から直参照できないので要注意！

以上、AngularJSでグローバル変数を定義する方法でした。ではでは(^_^)/~