はじめに
前回に引き続き、図1のようなタスク管理をするサンプルを作成します。前回までで画面の作成とボタンのアクションのイベント等の処理が終了し、画面周りについては完成しました。
しかし、まだ、実際のデータの登録、削除などを含めてデータの管理は行っていません。今回は、AngularJSのサービス機能を使ってタスクのデータ管理を扱う部分を実装します。
図1：作成するアプリケーションの概要
対象読者
- jQueryなどを使っている開発者
- JavaScriptを使った複数人でのプロジェクトに参加している方
- JavaScriptを使ってサーバ等と連携したフロントエンドの開発をしている方
必要な環境
この記事では、AngularJSを使用し、Chrome（39.0）、IE11、Firefox（34.0）、Safari（8.0.2）の環境にて確認を行っています。
サービスとは
AngularJSでのサービスは大きく分けて2つの目的で使用されます。ひとつは今回のサンプルで作成するようにビジネスロジックを記述するため、もうひとつはユーティリティ等の汎用機能として使われます。例えば、ログの記述や、Ajaxのための機能は既にAngularJSで用意されていますが、こちらもサービス機能を使って実装されています。一般的にこれらを、MVC構造では「モデル」と呼んでいます。前回までに利用してきたディレクティブやコントローラと今回紹介するサービスを、MVC構造で記述すると図2のようになります。
図2：AngularJSのMVC構造
また、各サービスのインスタンスはアプリケーションで1つ、という大きな特徴を持っています。少々難しい言い方をすれば、シングルトンのオブジェクトという扱いになります。この特徴を利用して、各コントローラ間などでデータ共有をすることもできます。今回サンプルとして作成するItemsサービスは図3のような関係になり、各コントローラからDI機能を使って利用されます。
図3：カスタムサービスとその他コンポーネント
