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

AngularJS TIPS

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

2016年7月5日

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

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

 本連載では、ほとんどの処理をコントローラーの中で記述しています。もっとも、これはあくまでコードの簡単化を目的としているためで、本格的なアプリ開発では、アプリ固有のロジックは、積極的にサービスとして切り出していくべきです。これによって、コントローラーの見通しがよくなるだけでなく、それぞれのコンポーネントの役割分担が明確になりますので、単体テストも実施しやすくなります。

 AngularJSでは、サービスを定義するために、以下のメソッドが用意されています。

  • value
  • constant
  • factory
  • service
  • provider

 これらの使い分けについては、あらためて別稿で後述しますので、本稿では、まずシンプルにサービスを定義できるvalueメソッドから解説していきます。

 valueメソッドは、主に複数のコントローラー間で共有したい値(value)を管理するサービスを定義するために利用します。定義に利用するメソッド名から、便宜的にvalueサービスと呼ぶこともあります。

 では、具体的な例を見てみましょう。以下は、

  • アプリのタイトルを表すAppName(文字列)
  • 作成者情報を表すCreator(オブジェクト)
  • アプリ共通で利用するロギング処理AppLog(関数)

といったサービスを、valueメソッドで定義するコードです。

JavaScript
angular.module('myAppService', [])
  .value('AppName', 'AngularJS TIPS')
  .value('Creator', {
    author: '山田祥寛',
    updated: new Date(2016, 4, 15)
  })
  .value('AppLog', function(message) {
    console.log('[myApp]' + message);
  });
valueメソッドでサービスを定義するためのコード(value.js)

 valueメソッドの構文は、以下の通りです。

[構文]valueメソッド

value(name, val)

  • name: サービス名
  • val: サービスのインスタンス(値)

 valueメソッドという名前から誤解してしまいそうですが、引数valにはシンプルな値(スカラー値)だけでなく、オブジェクトや関数まで指定できます。つまり、簡単な処理をサービス化するだけであれば、valueメソッドでも十分です。

 ただし、valueメソッドでは定義に当たって、他のサービスを注入できないという制限があります。(例えば)非同期通信のための$httpサービスすらvalueサービスでは利用できないということです。他のサービスと組み合わせるようなサービスを定義する際には、serviceメソッドを利用してください(詳細は後日解説の予定です)。

定義済みのvalueサービスを呼び出す

 以上のように定義したvalueサービスを呼び出しているのは、以下のコードです。

HTML
 
 
 
 
 
 
 
 
 
 
1
2
 
 
 
 
 
 
 
 
<!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']) 
  .controller('MyController', ['$scope', 'AppName', 'Creator', 'AppLog', 
    function($scope, AppName, Creator, AppLog) {
    console.log(AppName);
    console.log(Creator);
    AppLog(Creator.author);
  }]);
</script>
</body>
</html>
valueサービスを呼び出すためのコード(value_app.html)
コンソール
AngularJS TIPS
{
  author: "山田祥寛",
  updated: Sun May 15 2016 00:00:00 GMT+0900 (東京 (標準時))
}
[myApp]山田祥寛
AppName/Creator/AppLogサービスの呼び出し結果(Webブラウザーの開発者ツール)

開発者ツールによって表示内容は少し異なるが、ここでは本稿の説明に関係があるものに絞って表記している。

 自作サービスを呼び出すための構文も、標準のサービスを呼び出す場合のそれと、特に変わりはありません。valueサービスを定義したmyAppServiceモジュールへの依存関係を宣言して(1)、MyControllerコントローラーにもAppNameCreatorAppLogサービスを注入します(2)。これでコントローラーの配下でサービスにアクセスできるようになります。

処理対象:サービス カテゴリ:基本
処理対象:サービスの切り出し カテゴリ:基本
API:angular.Module カテゴリ:ng(コアモジュール) > type(型)

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

AngularJS TIPS
61. 日付/時刻値を入力する際にタイムゾーンを加味するには?(ng-model-options)

ng-model-optionsディレクティブにtimezoneパラメーターを指定することで、タイムゾーンによる時差を加味した日時を<input>要素から取得する方法を説明する。

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

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

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

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

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

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

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

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

サイトからのお知らせ

Twitterでつぶやこう!