入門
攻略!AngularJS 1.2
12
本シリーズはAngularJS 1.2での解説です。内容をアップデートした新シリーズ「攻略!AngularJS 1.5」があります。

シリーズ最終回はモジュールやサービスをつないで期待通りの動作をするかを検証するEnd to Endのテスト方法を解説します。ProtractorというSeleniumベースのテストフレームワークが便利です。

外村 和仁
外村 和仁 | フロントエンド・エンジニア

AngularJSの特徴のひとつに、テストを重視するという点があります。今回は、ユニットテストというモジュールやサービス単体をテストする方法を紹介します。

外村 和仁
外村 和仁 | フロントエンド・エンジニア

ディレクティブの内容をテンプレートの一部として利用するtranscludeと、ディレクティブ相互でやりとりを行うcontrollerとrequireを解説します。ディレクティブ内部の機能や構造を隠蔽でき、便利です。

外村 和仁
外村 和仁 | フロントエンド・エンジニア

ディレクティブのスコープについて解説します。親スコープの継承や隔離スコープ、親スコープとディレクティブのローカルスコープとの紐付けを扱います。ディレクティブが楽に書けるようになります。

外村 和仁
外村 和仁 | フロントエンド・エンジニア

AngularJSはディレクティブを介してDOMを操作します。今回はDOMを操作するための、独自ディレクティブ定義の仕方のもっとも基本となる部分を解説します。

外村 和仁
外村 和仁 | フロントエンド・エンジニア

AngularJSでアプリケーションのビジネスロジックやデータを定義する方法は複数あります。その方法を整理しながら解説し、さらにそれらの定義方法の使い分けについても解説します。

外村 和仁
外村 和仁 | フロントエンド・エンジニア

AngularJSでサーバーとの通信を簡単に実装できる$httpサービスと、ngResourceモジュールについて解説しています。$scopeと組み合わせて使うと、通信結果を簡単にページに反映できます。

外村 和仁
外村 和仁 | フロントエンド・エンジニア

AngularJSで繰り返し処理を行うディレクティブ、ng-repeatを解説します。前回解説したフィルタの仕組みと組み合わせると、さまざまな条件で要素を検索し、ソートをして表示することもできます。

外村 和仁
外村 和仁 | フロントエンド・エンジニア

フィルタはテンプレートでの表示を変換できます。既製フィルタの使い方、カスタムフィルタの作り方や使い方を解説します。フィルタをうまく使うと、ビューやコントローラーの見通しがよくなります。

外村 和仁
外村 和仁 | フロントエンド・エンジニア

AngularJSの主な概念のうち、複数の機能をまとめるモジュールと、ビューの振る舞いを定義するコントローラーについて解説します。AngularJS特有の文法や注意点もあわせて紹介します。

外村 和仁
外村 和仁 | フロントエンド・エンジニア

AngularJSのテンプレート機能のうち、基本的なものを解説します。今回の記事では、JavaScriptを1行も使わないサンプルばかりですが、双方向データバインディングが簡単に実装できるのがわかります。

外村 和仁
外村 和仁 | フロントエンド・エンジニア

第1回目はAngularJSとはどのようなことができるのか、どのような特徴があるのかを簡単なデモを用いて説明します。これから実装を理解するにあたってのベースとなる概要をおさえましょう。

外村 和仁
外村 和仁 | フロントエンド・エンジニア