Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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初級編

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

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

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

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 ビュー(描画結果)

×