このスライドは、以下のブログに記載のAngularJS初級編に 関するスライドです。 http://sub-labo.com/2014/07/06/angularjs-kotohajime/ スライドの内容は以下のとおりです。 AngularJSとは AngularJSの構成要素(MVC) 　- モデル(Model) 　- ビュー(View) 　- コントローラ(Controller)

1. AngularJS初級編
by Shunta Saito @ Sub-Labo

2. 目次
• AngularJSとは
• AngularJSの構成要素(MVC)
© 2014 Sub-Labo

3. AngularJS とは
• Google社が中心になって開発している、
クライアントサイドMVCフレームワークです。
• 主な特徴は以下のとおりとなります。
• データバインディング - Data Binding (2-Way)
• 依存性の注入 - Dependency Injection
• 通常のWeb開発では複雑になりがちなソースが、
AngularJSを利用すると単純なソースで済むようになります。
© 2014 Sub-Labo

4. データバインディングとは
モデルとビューの間でのデータのやりとりには
大きく分けて、以下の２パターンが有ります。
以下のようなデータのやりとりを自動で担当してくれる
仕組みをデータバインディングと呼んでいます。
モデル
(JS)
ビュー
(HTML)
モデル
(JS)
ビュー
(HTML)
© 2014 Sub-Labo
例：DBから取得したユーザ
情報をフォームへ表示する
例：ユーザがフォームに
入力した情報を取得する。

5. データバインディングを
使わない場合(モデルからビュー)
モデル
jQueryで実装した場合、
次のようになります。
http://jsfiddle.net/subuta/skvj4/
ビュー
© 2014 Sub-Labo

6. データバインディングを
使わない場合(ビューからモデル)
モデルビュー
© 2014 Sub-Labo
jQueryで実装した場合、
次のようになります。
http://jsfiddle.net/subuta/JAt3v/

7. データバインディングを使う場合
モデル
AngularJSで実装した場合、
次のようになります。
http://jsfiddle.net/subuta/U3edb/
ビュー
© 2014 Sub-Labo

8. 依存性の注入とは
ある機能が、他のどの機能に依存しているかを定義し
ておき、コード実行の際に依存している機能同士を紐
付ける(注入:Injection)する機能となります。
[定義]
Owner
[注入]
Pet
© 2014 Sub-Labo
Pet
Owner
Pet

9. 依存性の注入を行わない場合
© 2014 Sub-Labo
OwnerクラスにPetクラスへの依存性が明示されていないため、
実装を間違えた場合、エラーの原因が分かりづらい。
http://jsfiddle.net/subuta/jK3J9/
[正しい実装]
[間違った実装]
コメントアウトされているため、
Petインスタンスがセットされない。

10. 依存性の注入を行う場合
OwnerクラスにPetクラスへの依存性が明示されているため、
実装を間違えた場合でも、エラーの原因が分かりやすくなる。
http://jsfiddle.net/subuta/mh4uL/ ※AngularJSで実装した場合
[正しい実装] [間違った実装]
© 2014 Sub-Labo
依存しているPetクラス(プロバイダ)名を
間違えている。(正=PetService)
Angularにて、プロバイダが見つからないという
エラーメッセージが出力されている。
Petクラスへの
依存を定義し注入

11. AngularJSの構成要素(MVC)
• クライアントサイドMVCとは？
• モデル - Model!
ビューに表示されるもの(JavaScriptのオブジェクト)を示します。
JavaScriptでは任意のString/Integer/Object(Hash)/Listなど
• ビュー - View!
ユーザが操作する画面(HTML)を示します。HTMLの指定に応じて、
モデルを適切な方法で表示する仕組みとなります。
• コントローラ - Controller!
ページの表示リクエストに応じて呼び出され、モデル・ビューを表示するための
準備や、画面上でボタンが押された場合の挙動を管理する箇所となります。
© 2014 Sub-Labo

12. AngularJSにおけるMVC
http://jsfiddle.net/subuta/5kMe4/
© 2014 Sub-Labo
モデル - Model
コントローラ - Controller
ビュー - View
ビュー(描画結果)