AngularJSを浅めに紹介します

3,652 views

Published on

Google製JavaScriptフレームワークAngularJS(http://angularjs.org/)の良さを10分くらいで紹介するための資料です.身内向けの勉強会でしゃべるときに使いました.

スライド中のサンプルコードはこちらに https://github.com/daisy1754/angular-simple-demo-flickr-cat

Published in: Technology
1 Comment
10 Likes
Statistics
Notes
No Downloads
Views
Total views
3,652
On SlideShare
0
From Embeds
0
Number of Embeds
585
Actions
Shares
0
Downloads
22
Comments
1
Likes
10
Embeds 0
No embeds

No notes for slide

AngularJSを浅めに紹介します

  1. 1. AngularJSの簡単な紹介 1 2014/1/7
  2. 2. 今日の目的 AngularJSフレームワークを使ってみたいと思わせる 全てのうんこJavaScript コードを,生まれる前に 消し去りたい 2 © Magica Quartet
  3. 3. 脱線: JavaScriptの残念さと人々の戦い  貧弱な組み込みメソッド → 簡便な記述を可能にする便利ライブラリ jQuery underscore.js  残念なスコープの仕様 → モジュール化を支援するライブラリ require.js  View (HTML)と密結合なりがち → MV*系フレームワーク Knockout.js AngularJS Backbone.js  そもそもJavaScript書きたくない → いわゆるAltJSたち CoffeeScript TypeScript JSX 3
  4. 4. AngularJS,最近流行ってるぽい Google検索トレンド Qiita2013アドベントカレンダー ストック数比較 4
  5. 5. AngularJSのよろしいところ 発表目次 HTMLがそのままテンプレート  双方向データバインディングによるModel・Viewの同期  便利な組み込みserviceたち  組み込みdirectiveによるリスト・フィルタなどの定番処理  今日は省略 Dependency Injectionによるモジュール性の向上  Routing機構によって複数Viewを持つアプリも開発可能  5
  6. 6. テンプレートとしてのHTML, 双方向データバインディング 6 http://daisy1754.github.io/angular-simple-demo-flickr-cat/simplest-demo.html
  7. 7. テンプレートとしてのHTML, 双方向データバインディング AngularJSを利用するアプリの宣言 yourNameモデルの値を表示 Inputタグ(View)とyourName モデルの値をバインド Inputタグの値の変化が yourNameモデルに伝わり Viewも変化する 7 http://daisy1754.github.io/angular-simple-demo-flickr-cat/simplest-demo.html
  8. 8. AngularJSで簡単に実現できるページの例 FlickrからJSON形式で持ってきた画像の表示 + インタラクティブに絞り込み JS/HTMLあわせて40行くらい 8 http://daisy1754.github.io/angular-simple-demo-flickr-cat/flickr-cat.html
  9. 9. コード説明(1/3): API叩いてデータ取得 HTML このbodyタグで囲まれる部分は PhotoCtrlによって制御される JavaScript PhotoCtrlの宣言 組み込みの$httpを利用して, flickrAPIにアクセス,結果のJSONを 9 そのままモデルに格納
  10. 10. コード説明(2/3): 取得結果リストを表示 Ng-repeatが指定されたタグは 繰り返し処理される HTML 10
  11. 11. コード説明(3/3): リストのフィルタリング HTML titleFilterがtrueとなる要素のみ表示 JavaScript 11
  12. 12. まとめ 具体例を用いてAngularJSを紹介した HTMLをテンプレート的に利用  双方向データバインディング  ng-repeatなどの便利directive  $httpなどの便利service により,コード量減りつつDOMを意識せず クライアントサイドプログラミングができそう  12
  13. 13. 参考資料 AngularJS 勉強会のまとめ (動画・スライド) #ng_jp | Engine Yard Blog JP http://www.engineyard.co.jp/blog/2013/angularjs-meetup-4th/ AngularJS公式チュートリアル http://docs.angularjs.org/tutorial 今、AngularJSというフレームワークがヤバい - (゚∀゚)o彡 sasata299's blog http://blog.livedoor.jp/sasata299/archives/51966228.html 13

×