Deep Insider の Tutor コーナー
>>  Deep Insider は本サイトからスピンオフした姉妹サイトです。よろしく! 
AngularJS TIPS

AngularJS TIPS

複数のコントローラー間で共有すべき値を管理するには?(constantメソッド)

2016年7月11日

より実践的なアプリ開発を行うためにアプリ固有の処理ロジック(今回はconstantメソッドにより管理する「値」)をサービスとして切り出し、それを呼び出す方法を説明する。

  • このエントリーをはてなブックマークに追加

 別稿「TIPS:複数のコントローラー間で共有すべき値を管理するには?(valueメソッド)」では、サービスを自作するための最もシンプルな方法として、valueメソッドを利用する方法について解説しました。このvalueメソッドによく似たメソッドとして、constantメソッドがあります。

 constantメソッドの構文はvalueメソッドと同様ですので、さっそく具体的なサンプルも見てみましょう。以下は、別稿のサンプルをconstantメソッドで書き換えた例です。

JavaScript
angular.module('myAppService', [])
  .constant('AppName', 'AngularJS TIPS')
  .constant('Creator', {
    author: '山田祥寛',
    updated: new Date(2016, 4, 15)
  })
  .constant('AppLog', function(message) {
    console.log('[myApp]' + message);
  });
HTML
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8" />
<title>AngularJS TIPS</title>
</head>
<body ng-controller="MyController">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="scripts/constant.js"></script>
<script>
angular.module('myApp', ['myAppService'])
  .controller('MyController', ['$scope', 'AppName', 'Creator', 'AppLog',
    function($scope, AppName, Creator, AppLog) {
    console.log(AppName);
    console.log(Creator);
    AppLog(Creator.author);
  }]);
</script>
</body>
</html>
リスト1 constantメソッドで共有すべき値を定義するコード(上:constant.js/下:constant_app.html)
コンソール
AngularJS TIPS
{
  author: "山田祥寛",
  updated: Sun May 15 2016 00:00:00 GMT+0900 (東京 (標準時))
}
[myApp]山田祥寛
AppName/Creator/AppLogサービスの結果

 valueサービスと同じ結果が得られますので、このコードでは違いは分かりません。では、configメソッドを定義して、この中でconstantサービス/valueサービスを呼び出してみるとどうでしょう(リスト2=constantサービス、リスト3=valueサービス)。

HTML
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8" />
<title>AngularJS TIPS</title>
</head>
<body ng-controller="MyController">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="scripts/constant.js"></script>
<script>
angular.module('myApp', ['myAppService'])
  .config(['AppName', 'Creator', 'AppLog',
    function(AppName, Creator, AppLog) {
    console.log(AppName);
    console.log(Creator);
    AppLog(Creator.author);
  }])
  .controller('MyController', ['$scope', function($scope) {
  }]);
</script>
</body>
</html>
リスト2 constantサービスをconfigメソッドから呼び出した場合(constant_app.html)
正しくサービスで定義された値が表示される
HTML
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8" />
<title>AngularJS TIPS</title>
</head>
<body ng-controller="MyController">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="scripts/value.js"></script>
<script>
angular.module('myApp', ['myAppService'])
  .config(['AppName', 'Creator', 'AppLog',
    function(AppName, Creator, AppLog) {
    console.log(AppName);
    console.log(Creator);
    AppLog(Creator.author);
  }])
  .controller('MyController', ['$scope', function($scope) {
  }]);
</script>
</body>
</html>
リスト3 valueサービスをconfigメソッドから呼び出した場合(value_app.html)
エラーとなり、正しく呼び出せない

 constantサービスは正しく呼び出せるのに対して、valueサービスは「$injector:modulerr」エラーとなり、サービスの注入で失敗していることが確認できます。

 これは、configメソッドが、サービスのインスタンスが生成される前に呼び出されるという性質を持っているためです。一般的なサービスは、サービスインスタンスの生成後に呼び出されるので、configメソッドの中で呼び出すことができません。唯一、例外的にconfigメソッドで呼び出せるのがconstantサービスなのです。

 constantサービスでは、その性質上、configメソッドで参照すべき情報――例えば、サービスの挙動を決定するような定数情報を定義するのが一般的です*1。それ以外のコントローラー/サービスから参照すべき情報は、valueサービスとして定義します。

  • *1 constantサービスは、constantという名前に反して、別に定数を定義しているわけではありません(後から値を変更することも可能です)。あくまで、用途として、サービスの設定情報(定数)を定義するために利用するサービスであるにすぎません。
処理対象:サービス カテゴリ:基本
処理対象:サービスの切り出し カテゴリ:基本
API:angular.Module カテゴリ:ng(コアモジュール) > type(型)

※以下では、本稿の前後を合わせて5回分(第62回~第66回)のみ表示しています。
 連載の全タイトルを参照するには、[この記事の連載 INDEX]を参照してください。

AngularJS TIPS
62. モデルへの入出力に際して処理を介するには?(ng-model-options)

入力フォームとモデルをバインドした際に、独自のゲッター/セッター関数を仲介させることで、そのモデルに出し入れする値を検証/加工する方法を説明する。

AngularJS TIPS
63. 複数のコントローラー間で共有すべき値を管理するには?(valueメソッド)

より実践的なアプリ開発を行うためにアプリ固有の処理ロジック(今回はvalueメソッドにより管理する「値」)をサービスとして切り出し、それを呼び出す方法を説明する。

AngularJS TIPS
64. 【現在、表示中】≫ 複数のコントローラー間で共有すべき値を管理するには?(constantメソッド)

より実践的なアプリ開発を行うためにアプリ固有の処理ロジック(今回はconstantメソッドにより管理する「値」)をサービスとして切り出し、それを呼び出す方法を説明する。

AngularJS TIPS
65. アプリ内でよく利用するビジネスロジックを定義するには?(serviceメソッド)

より実践的なアプリ開発を行うために、アプリ固有のビジネスロジックをserviceメソッドによりサービスとして切り出し、それを呼び出す方法を説明する。

AngularJS TIPS
66. アプリ内でよく利用するビジネスロジックを定義するには?(factoryメソッド)

より実践的なアプリ開発を行うために、アプリ固有のビジネスロジックをfactoryメソッドによりサービスとして切り出し、それを呼び出す方法を説明する。

サイトからのお知らせ

Twitterでつぶやこう!