AngularJSでグローバル変数(定数)を定義する2つの方法

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

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

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

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

方法1.$rootScope で定義するやり方

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

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

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

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

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

 

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

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

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

 

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

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

 

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

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

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

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

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

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

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

方法2.Value recipe(バリューレシピ)を利用する方法

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

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

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

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

 

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

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

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

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

 

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

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

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

 

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

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

ここまでのまとめ

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

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

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

Commentsこの記事についたコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください