AngularJS チュートリアル
AngularJS公式サイトのチュートリアルが分かりやすかったので、日本語メモです。
内容は現在進行形でまとめ中です。自分用メモであり、ちゃんとした翻訳ではありません。端折ったり追記したりしている部分もあります。自己責任でご利用ください。
参照したのは、ver.1.4.8のものです。OSはWindowsです。
- 0.ブートストラップ
- 1.静的テンプレート
- 2.Angularテンプレート (データを画面に表示)
- 3.繰り返し要素のフィルタ (テキスト検索機能)
- 4.2種類のデータバインディング (ソート機能)
- 5.XHRと依存性の注入(injection)
- 6.リンクと画像のテンプレート
- 7.ビューのルーティングと操作
- 8.テンプレート詳細
- 9.フィルタ
- 10.イベントハンドラ
- 11.RESTとカスタムサービス
- 12.アニメーションの適用
- おわりに
チュートリアルの準備
公式チュートリアルはGitで管理されてます。
Gitに詳しくなくても、インストールができて、コマンドをちょっとだけ覚えられれば、チュートリアルは進められます。
Gitのインストール
自分のPCにGitが入っていないなら、http://git-scm.com/download からGitをダウンロードしてインストールします。
インストールすると、コマンドプロンプトなどで git というコマンドが使えるようになります。インストールできているか、git --version と入力して確認できます。
主に使うコマンドは以下の2つです。
- git clone ... : クローン。ネット上にあるリポジトリ（＝ファイル一式）を、自分のPCにクローン（＝コピー）します。
- git checkout ... : チェックアウト。コードの特定のブランチやタグ付けされたバージョンを、変更するためにチェックアウトします。
angular-phonecat をダウンロード
ネット上、GitHabにあるチュートリアル用のリポジトリ（ファイル一式）をクローン（自分のPCにダウンロード）します。
Git Bash（またはコマンドプロンプト）でダウンロードしたいディレクトリに移動してから：
git clone --deps=14 https://github.com/angular/angular-phonecat.git
と入力します。
すると、現在のディレクトリに angular-phonecat というディレクトリが作成されます。
ちなみに、--deps=14は「更新履歴は直近14回分だけ」取ってくるオプション。ダウンロードする量を減らせます。
作成されたディレクトリ、angular-phonecatに移動しておきます。
cd angular-phonecat
今後、チュートリアルでコマンドを実行する時は、このディレクトリで実行してください。
Node.jsのインストール
ローカルで動くWEBサーバとテストツールを使いたい場合は、Node.js の v0.10.27 以上が必要です。OSに応じたNode.jsのインストーラーは http://nodejs.org/download/ からダウンロードできます。
Node.jsのバージョンは、node --version で確認できます。
チュートリアルで使うツールのダウンロード
Node.jsをインストールした後、依存するツール一式をダウンロードできます。
先のangular-phonecatディレクトリで、以下のコマンドを実行します。
npm install
このコマンドを使うと、package.jsonファイルを読みこみ、node_modeulesディレクトリに以下のツールをダウンロードします。
- Bower : クライアントサイドのコードパッケージ管理ツール
- Http-Server : ローカルで動くシンプルなWEBサーバ
- Karma : ユニットテストができるツール
- Protractor : end to end (E2E) テストができるツール
このプロジェクトでは、いくつかのnpmヘルパースクリプトが設定されています。
開発中によく使うコマンドを簡単に実行できます。
- npm start : ローカルの開発用サーバの起動
- npm test : ユニットテストができる Karma を起動
- npm run protractor : E2Eテストができる Protractor を起動
- npm run update-webdriver : Protractorに必要なドライバをインストール
開発用サーバの起動
Angularアプリケーションは純粋にクライアント側のコードで、直接ブラウザで開くこともできますが、サーバ経由で表示することをお勧めします。
ファイルを直接開いた場合、たいていのモダンブラウザは、サーバリクエストが発生するJavascriptコードを実行させてくれないからです。
このチュートリアルのプロジェクトは、サーバ経由で表示する前提になっています。サーバを起動するコマンドは以下の通りです：
npm start
ローカルPC上で、8000ポートを受け取るサーバが起動します。
アプリケーションは以下のURLで表示できます
http://localhost:8000/app/index.html
ユニットテストの起動
アプリケーションのJavaScriptコードが正常に動いているか、ユニットテストを使って確認できます。
ユニットテストでは、アプリケーション内の独立した小さい部分をテストします。
テスト内容は test/unit ディレクトリに保存します。
このチュートリアルのプロジェクトでは、ユニットテストに Karma を使う設定になっています。
npm test
このコマンドで、Karmaが起動します。Karmaは設定ファイル test/karma.conf.js を読み込みます。設定ファイルがKarmaに指示しているのは：
- Chromeを起動してKarmaに接続する
- そのブラウザで全てのユニットテストを実行する
- テスト結果をターミナルウィンドウに表示する
- プロジェクト内の全てのJavascriptファイルを監視して、変更されていれば再テストする
Karma をバックグラウンドで常に起動させておくのは、良い考えです。
コードを変更したとき、ユニットテストに合格するかどうか、すぐにフィードバックが得られます。
E2Eテストの起動
アプリケーション全体が想定どおりに動くかどうか、E2Eテストで確認できます。E2Eテストはクライアント側アプリケーション全体、特にビューが表示され正しく動作しているかどうかを確認します。
これは、ブラウザで実行中のアプリケーションで、実際のユーザーの操作をシミュレーションすることで実現しています。
テスト内容は test/e2e ディレクトリに保存します。
このチュートリアルのプロジェクトでは、E2Eテストに Protractor を使う設定になっています。
Protractorはブラウザごとのドライバに依存しています。ドライバは以下のコマンドでインストールできます。
npm run update-webdriver
このコマンドは、1度だけ実行してください。
Protractor が動作中のアプリケーションと一緒に動くためには、ウェブサーバを起動しておく必要があります。
npm start
その後、Protractorによるテストを実行します。
npm run protractor
Protractorは設定ファイル test/protracotor-conf.js を読み込みます。設定ファイルが Protractor に指示しているのは：
- Chromeを開いてアプリケーションに接続する
- ブラウザ上で全てのE2Eテストを実行する
- テスト結果をターミナルウィンドウに表示する
- ブラウザを閉じて終了する
HTMLビューを変更したり、アプリケーション全体がちゃんと動くか確認したいとき、いつでも、E2Eテストをするのは良いことです。変更をリモートリボジトリに公開する前にはE2Eテストをするのが普通です。
以上でチュートリアルの準備は完了です。
最終更新日：2015/12/24
[ ページ先頭へ ]