AngularJS TIPS
アプリ内でよく利用するビジネスロジックを定義するには？（serviceメソッド）
より実践的なアプリ開発を行うために、アプリ固有のビジネスロジックをserviceメソッドによりサービスとして切り出し、それを呼び出す方法を説明する。
別稿「TIPS：複数のコントローラー間で共有すべき値を管理するには？（valueメソッド）」「TIPS：同（constantメソッド）」でも触れたように、value／constantメソッドを利用することで、ごく簡易なサービスを定義できます。
しかし、これらのメソッドには「他のサービスを注入できない」という制約があります。つまり、複数のサービスを組み合わせた、本格的なサービス開発には不向きということです。value／constantメソッドでは、その名の通り、アプリ内で共有すべき変数／定数を定義する程度にとどめるのが無難でしょう。
本格的な開発では、まずはserviceメソッドを利用してください。それではさっそく、具体的な例を見てみましょう。以下は、
- 四角形の面積を求める
squareメソッド - 円の面積を求める
circleメソッド - ひし形の面積を求める
diamondメソッド
を備えたAreaServiceサービスの例です。
|
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;
};
}]);
|
serviceメソッドの一般的な構文は、以下の通りです。
［構文］serviceメソッド
service(name, constructor)
- name： サービスの名前
- constructor： サービスをインスタンス化するためのコンストラクター関数
serviceメソッドの引数constructorには、配列アノテーションの記法でその他のサービス（ここでは$logサービス）を注入できます。依存性注入に関する詳細は、別稿「TIPS：AngularJSの依存性注入を利用するには？」を参照してください。
あとは、コンストラクター関数の中で「this.メソッド名 = ～」の形式で、サービスとして公開するメソッドを定義していきます。この構文は、AngularJS固有のものではなく、JavaScriptの標準的な記法です。
定義済みのサービスを呼び出す
以上のように定義したAreaServiceサービスを呼び出しているのは、以下のコードです。サービスをコントローラーに注入＆インスタンス化する流れは、本連載でも何度も触れてきましたので、特筆すべき点はありません。
|
<!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>
|
処理対象：サービスの切り出し カテゴリ：基本
API：angular.Module カテゴリ：ng（コアモジュール） > type（型）
※以下では、本稿の前後を合わせて5回分（第63回～第67回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
63. 複数のコントローラー間で共有すべき値を管理するには？（valueメソッド）
より実践的なアプリ開発を行うためにアプリ固有の処理ロジック（今回はvalueメソッドにより管理する「値」）をサービスとして切り出し、それを呼び出す方法を説明する。
64. 複数のコントローラー間で共有すべき値を管理するには？（constantメソッド）
より実践的なアプリ開発を行うためにアプリ固有の処理ロジック（今回はconstantメソッドにより管理する「値」）をサービスとして切り出し、それを呼び出す方法を説明する。
65. 【現在、表示中】≫ アプリ内でよく利用するビジネスロジックを定義するには？（serviceメソッド）
より実践的なアプリ開発を行うために、アプリ固有のビジネスロジックをserviceメソッドによりサービスとして切り出し、それを呼び出す方法を説明する。
66. アプリ内でよく利用するビジネスロジックを定義するには？（factoryメソッド）
より実践的なアプリ開発を行うために、アプリ固有のビジネスロジックをfactoryメソッドによりサービスとして切り出し、それを呼び出す方法を説明する。
67. パラメーター付きのサービスを定義するには？（providerメソッド）
value／service／factoryメソッドに比べてより原始的なproviderメソッドの利用場面を紹介し、使い分け指針をまとめる。またproviderメソッドを使ってサービスを定義する方法を解説する。
