Successfully reported this slideshow.
AngularJS初級編
by Shunta Saito @ Sub-Labo
目次
• AngularJSとは
• AngularJSの構成要素(MVC)
© 2014 Sub-Labo
AngularJS とは
• Google社が中心になって開発している、         
クライアントサイドMVCフレームワークです。
• 主な特徴は以下のとおりとなります。
• データバインディング - Data Binding (2-Wa...
データバインディングとは
モデルとビューの間でのデータのやりとりには    
大きく分けて、以下の2パターンが有ります。        
以下のようなデータのやりとりを自動で担当してくれる
仕組みをデータバインディングと呼んでいます。
モデル
...
データバインディングを
使わない場合(モデルからビュー)
モデル
jQueryで実装した場合、
次のようになります。
http://jsfiddle.net/subuta/skvj4/
ビュー
© 2014 Sub-Labo
データバインディングを
使わない場合(ビューからモデル)
モデルビュー
© 2014 Sub-Labo
jQueryで実装した場合、
次のようになります。
http://jsfiddle.net/subuta/JAt3v/
データバインディングを使う場合
モデル
AngularJSで実装した場合、
次のようになります。
http://jsfiddle.net/subuta/U3edb/
ビュー
© 2014 Sub-Labo
依存性の注入とは
ある機能が、他のどの機能に依存しているかを定義し
ておき、コード実行の際に依存している機能同士を紐
付ける(注入:Injection)する機能となります。
[定義]
Owner
[注入]
Pet
© 2014 Sub-Labo...
依存性の注入を行わない場合
© 2014 Sub-Labo
OwnerクラスにPetクラスへの依存性が明示されていないため、
実装を間違えた場合、エラーの原因が分かりづらい。
http://jsfiddle.net/subuta/jK3J9/
[...
依存性の注入を行う場合
OwnerクラスにPetクラスへの依存性が明示されているため、
実装を間違えた場合でも、エラーの原因が分かりやすくなる。
http://jsfiddle.net/subuta/mh4uL/ ※AngularJSで実装した場...
AngularJSの構成要素(MVC)
• クライアントサイドMVCとは?
• モデル - Model!
ビューに表示されるもの(JavaScriptのオブジェクト)を示します。
JavaScriptでは任意のString/Integer/Ob...
AngularJSにおけるMVC
http://jsfiddle.net/subuta/5kMe4/
© 2014 Sub-Labo
モデル - Model
コントローラ - Controller
ビュー - View
ビュー(描画結果)
Upcoming SlideShare
Loading in …5
×

AngularJS初級編

2,430 views

Published on

このスライドは、以下のブログに記載のAngularJS初級編に
関するスライドです。
http://sub-labo.com/2014/07/06/angularjs-kotohajime/

スライドの内容は以下のとおりです。

AngularJSとは
AngularJSの構成要素(MVC)
 - モデル(Model)
 - ビュー(View)
 - コントローラ(Controller)

Published in: Technology

AngularJS初級編

  1. 1. AngularJS初級編 by Shunta Saito @ Sub-Labo
  2. 2. 目次 • AngularJSとは • AngularJSの構成要素(MVC) © 2014 Sub-Labo
  3. 3. AngularJS とは • Google社が中心になって開発している、          クライアントサイドMVCフレームワークです。 • 主な特徴は以下のとおりとなります。 • データバインディング - Data Binding (2-Way)    • 依存性の注入 - Dependency Injection • 通常のWeb開発では複雑になりがちなソースが、    AngularJSを利用すると単純なソースで済むようになります。 © 2014 Sub-Labo
  4. 4. データバインディングとは モデルとビューの間でのデータのやりとりには     大きく分けて、以下の2パターンが有ります。         以下のようなデータのやりとりを自動で担当してくれる 仕組みをデータバインディングと呼んでいます。 モデル (JS) ビュー (HTML) モデル (JS) ビュー (HTML) © 2014 Sub-Labo 例:DBから取得したユーザ 情報をフォームへ表示する 例:ユーザがフォームに 入力した情報を取得する。
  5. 5. データバインディングを 使わない場合(モデルからビュー) モデル jQueryで実装した場合、 次のようになります。 http://jsfiddle.net/subuta/skvj4/ ビュー © 2014 Sub-Labo
  6. 6. データバインディングを 使わない場合(ビューからモデル) モデルビュー © 2014 Sub-Labo jQueryで実装した場合、 次のようになります。 http://jsfiddle.net/subuta/JAt3v/
  7. 7. データバインディングを使う場合 モデル AngularJSで実装した場合、 次のようになります。 http://jsfiddle.net/subuta/U3edb/ ビュー © 2014 Sub-Labo
  8. 8. 依存性の注入とは ある機能が、他のどの機能に依存しているかを定義し ておき、コード実行の際に依存している機能同士を紐 付ける(注入:Injection)する機能となります。 [定義] Owner [注入] Pet © 2014 Sub-Labo Pet Owner Pet
  9. 9. 依存性の注入を行わない場合 © 2014 Sub-Labo OwnerクラスにPetクラスへの依存性が明示されていないため、 実装を間違えた場合、エラーの原因が分かりづらい。 http://jsfiddle.net/subuta/jK3J9/ [正しい実装] [間違った実装] コメントアウトされているため、 Petインスタンスがセットされない。
  10. 10. 依存性の注入を行う場合 OwnerクラスにPetクラスへの依存性が明示されているため、 実装を間違えた場合でも、エラーの原因が分かりやすくなる。 http://jsfiddle.net/subuta/mh4uL/ ※AngularJSで実装した場合 [正しい実装] [間違った実装] © 2014 Sub-Labo 依存しているPetクラス(プロバイダ)名を 間違えている。(正=PetService) Angularにて、プロバイダが見つからないという エラーメッセージが出力されている。 Petクラスへの 依存を定義し注入
  11. 11. AngularJSの構成要素(MVC) • クライアントサイドMVCとは? • モデル - Model! ビューに表示されるもの(JavaScriptのオブジェクト)を示します。 JavaScriptでは任意のString/Integer/Object(Hash)/Listなど • ビュー - View! ユーザが操作する画面(HTML)を示します。HTMLの指定に応じて、 モデルを適切な方法で表示する仕組みとなります。 • コントローラ - Controller! ページの表示リクエストに応じて呼び出され、モデル・ビューを表示するための     準備や、画面上でボタンが押された場合の挙動を管理する箇所となります。 © 2014 Sub-Labo
  12. 12. AngularJSにおけるMVC http://jsfiddle.net/subuta/5kMe4/ © 2014 Sub-Labo モデル - Model コントローラ - Controller ビュー - View ビュー(描画結果)

×