AngularJSでMVCプログラミングをはじめよう

対象読者

• jQueryなどを使っているJavaScript開発者
• JavaScriptを使った複数人でのプロジェクトに参加している方
• JavaScriptを使ってサーバ等と連携したフロントエンドの開発をしている方

必要な環境

　この記事では、AngularJSを使用し、Chrome（36.0）、IE11、Firefox（31.0）、Safari（7.0.5）の環境で確認を行っています。

サンプルアプリケーションの概要

　今回作成するアプリケーションは、単純な「タスク管理」のアプリケーションです。次のような3つの画面を作ります。

1. タスク（件名とメモ）を登録する画面
2. 登録したタスク一覧を表示する画面
3. 登録したタスクを参照する画面と、削除する為の画面

図1　作成するアプリケーションの概要

　ページ遷移はシングルページアプリケーション形式で作成します。シングルページアプリケーションとは、jQuery Mobileなどでも使われている方式であり、通常は、Ajax等を用いて複数のファイルで管理されているHTMLを動的に読みDOMを構築しますが、今回のサンプルでは、1つのHTML内のdivタグの表示・非表示によって切り替えます。

　また、登録するタスクデータはサーバで管理する方法と、プログラム内の変数として保持する2つの方法を実装し、これらを切り替えられるようにします。実際の開発シーンではサーバ側の実装と同時に進めるも多々あります。AngularJSでは、依存性注入（DI）を使ってそのようなシーンで効率よく管理する方法があります。

　サーバで管理する部分はPHPで実装していますので、サンプルコードのrest.phpを参照してください。また、デザイン部分ではBootstrapを使っています。そのため、本サンプルコード内ではjQueryは使っていませんが、Bootstrapの依存のためにjQueryが必要になっています。

　また、ダウンロードできるコードはサンプルアプリケーションの完成形を載せています。Ajaxでのサーバ通信を必要としないブラウザだけで実行できる形式で提供しているので、サンプルアプリケーションの動きなどを確認することができます。

全体構造のプログラム構成

　続いて、プログラムファイルの全体構造を図2、表1のように作っていきます。

図2　サンプルコードのファイル構造