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

AngularJS TIPS

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

2016年7月19日

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

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

 別稿「TIPS:複数のコントローラー間で共有すべき値を管理するには?(valueメソッド)」「TIPS:同(constantメソッド)」でも触れたように、valueconstantメソッドを利用することで、ごく簡易なサービスを定義できます。

 しかし、これらのメソッドには「他のサービスを注入できない」という制約があります。つまり、複数のサービスを組み合わせた、本格的なサービス開発には不向きということです。valueconstantメソッドでは、その名の通り、アプリ内で共有すべき変数/定数を定義する程度にとどめるのが無難でしょう。

 本格的な開発では、まずはserviceメソッドを利用してください。それではさっそく、具体的な例を見てみましょう。以下は、

  • 四角形の面積を求めるsquareメソッド
  • 円の面積を求めるcircleメソッド
  • ひし形の面積を求めるdiamondメソッド

を備えたAreaServiceサービスの例です。

JavaScript
angular.module('myAppService', [])
  .service('AreaService', ['$log', function($log) {
    this.square = function(base, height) {
      $log.debug('[四角形]' + base + '×' + height);
      return base * height;
    };

    this.circle = function(radius) {
      $log.debug('[円(半径)]' + radius);
      return radius * radius * Math.PI;
    };

    this.diamond = function(diagonal1, diagonal2) {
      $log.debug('[ひし形]' + diagonal1 + '×' + diagonal2);
      return diagonal1 * diagonal2 / 2;
    };
  }]);
リスト1 AreaServiceサービスを定義するためのコード(service.js)

 serviceメソッドの一般的な構文は、以下の通りです。

[構文]serviceメソッド

service(name, constructor)

  • name: サービスの名前
  • constructor: サービスをインスタンス化するためのコンストラクター関数

 serviceメソッドの引数constructorには、配列アノテーションの記法でその他のサービス(ここでは$logサービス)を注入できます。依存性注入に関する詳細は、別稿「TIPS:AngularJSの依存性注入を利用するには?」を参照してください。

 あとは、コンストラクター関数の中で「this.メソッド名 = ~」の形式で、サービスとして公開するメソッドを定義していきます。この構文は、AngularJS固有のものではなく、JavaScriptの標準的な記法です。

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

 以上のように定義したAreaServiceサービスを呼び出しているのは、以下のコードです。サービスをコントローラーに注入&インスタンス化する流れは、本連載でも何度も触れてきましたので、特筆すべき点はありません。

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/service.js"></script>
<script>
angular.module('myApp', ['myAppService'])
  .controller('MyController', ['$scope', 'AreaService',
    function($scope, AreaService) {
    console.log(AreaService.square(3, 2));
    console.log(AreaService.circle(3));
    console.log(AreaService.diamond(4, 9));
  }]);
</script>
</body>
</html>
リスト2 AreaServiceサービスを呼び出すためのコード(service_app.html)
サービスの実行結果
処理対象:サービス カテゴリ:基本
処理対象:サービスの切り出し カテゴリ:基本
API:angular.Module カテゴリ:ng(コアモジュール) > type(型)

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

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

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

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

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

AngularJS TIPS
65. 【現在、表示中】≫ アプリ内でよく利用するビジネスロジックを定義するには?(serviceメソッド)

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

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

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

AngularJS TIPS
67. パラメーター付きのサービスを定義するには?(providerメソッド)

value/service/factoryメソッドに比べてより原始的なproviderメソッドの利用場面を紹介し、使い分け指針をまとめる。またproviderメソッドを使ってサービスを定義する方法を解説する。

サイトからのお知らせ

Twitterでつぶやこう!