AngularJS – 複数のcontroller間での値の共有 | 株式会社ソリューションウェア

ブログBlog

- AngularJS – 複数のcontroller間での値の共有
- 2015年12月8日

複数のcontroller間で値を共有する最もシンプルな方法はvalueメソッドの利用である。以下のように記述する。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>VALUE TEST</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script>
      angular.module('myApp', [])
      .value('HOGE', 'ほげ')
      .controller('myController', ['$scope', 'HOGE', function($scope, HOGE){
        $scope.hoge = HOGE;
      }]);
    </script>
  </head>
  <body ng-app="myApp">
    <div ng-controller="myController">
      <p>{{hoge}}</p>
    </div>
  </body>
</html>

valueメソッドの第１引数が値の名称で、第２引数が値自体となる。上記では値として文字列を指定しているが、文字列や数値といった基本型のみならず、オブジェクトや配列、関数の指定も可能である。以下に例を示す。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>VALUE TEST</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script>
      angular.module('myApp', [])
      .value('HOGE', 'ほげ')
      .value('NUM', 127)
      .value('ARRAY', ['hoge', 'fuga'])
      .value('OBJ', {'tako': 'たこ', 'ika':'イカ'})
      .value('FUNC', function(){ alert('まんぼう！');})
      .controller('myController', ['$scope', 'HOGE', 'NUM', 'ARRAY', 'OBJ', 'FUNC', function($scope, HOGE, NUM, ARRAY, OBJ, FUNC){
        $scope.hoge = HOGE;
        $scope.num = NUM;
        $scope.array = ARRAY;
        $scope.item = '';
        $scope.array.forEach(function(v, i){
          $scope.item += i + ':' + v + ',';
        });
        $scope.obj = JSON.stringify(OBJ);
        $scope.func = FUNC;

        $scope.doFunc = function(){
          $scope.func();
          return;
        };
      }]);
    </script>
  </head>
  <body ng-app="myApp">
    <div ng-controller="myController">
      <p>{{hoge}}</p>
      <p>{{num}}</p>
      <p>{{item}}</p>
      <p>{{obj}}</p>
      <button ng-click="doFunc()">click me!</button>
    </div>
  </body>
</html>

AngularJSではvalueメソッドとよく似たconstantというメソッドも用意されている。シグネチャは、constant(name, object)なのでvalueと変わりがない。また名称のイメージ的に定数管理用に思えるかもしれないが、値の変更が可能である。以下のページのボタンをクリックするとconstantで定義されたHOGEの内容を変更可能なことが確認できる。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CONSTANT TEST</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script>
      angular.module('myApp', [])
      .constant('HOGE', 'ほげ')
      .controller('myController', ['$scope', 'HOGE', function($scope, HOGE){
        $scope.hoge = HOGE;

        $scope.doClick = function(){
          HOGE = 'ふが';
          $scope.hoge = HOGE;
          return;
        };
      }]);
    </script>
  </head>
  <body ng-app="myApp">
    <div ng-controller="myController">
      <p>{{hoge}}</p>
      <button ng-click="doClick()">click me!</button>
    </div>
  </body>
</html>

ではconstantとvalueの違いはどこにあるのか。実はこの二つというかconstantとそれ以外のサービス（value, service, factory, provider）では、サービスのインスタンスが利用可能になるタイミングが異なる。 constantのインスタンスは、configメソッド呼び出し時から利用可能なのである。たとえば以下のように書くと動作するが、

.constant('HOGE', 'ほげ')
.value('FUGA', 'ふが')
.config(['HOGE', function(HOGE){
	console.log(HOGE);
}])

以下のように書くとエラーになる。

.constant('HOGE', 'ほげ')
.value('FUGA', 'ふが')
.config(['HOGE', 'FUGE', function(HOGE, FUGA){
	console.log(HOGE);
console.log(FUGA);
}])

これは、configメソッドはconstant以外のサービス（value, service, factory, provider）のインスタンスが登録される前に呼び出されるためである。後者の例の場合、valueの準備ができていないため、動作しないのだ。そのため、一般的な値共有はvalueメソッドを用い、config時に利用したい値（自作プロバイダの設定値等）はconstantを利用するのが正しいやり方ということになる。

この記事を書いた人 : 佐藤冬彦

その他のスタッフブログ:

一覧へ戻る

AngularJS – 複数のcontroller間での値の共有

JOIN OUR TEAM