Google製JavaScriptフレームワークAngularJS(http://angularjs.org/)の良さを10分くらいで紹介するための資料です．身内向けの勉強会でしゃべるときに使いました． スライド中のサンプルコードはこちらに　https://github.com/daisy1754/angular-simple-demo-flickr-cat

1. AngularJSの簡単な紹介
1
2014/1/7

2. 今日の目的
AngularJSフレームワークを使ってみたいと思わせる
全てのうんこJavaScript
コードを，生まれる前に
消し去りたい
2
© Magica Quartet

3. 脱線: JavaScriptの残念さと人々の戦い
 貧弱な組み込みメソッド
→ 簡便な記述を可能にする便利ライブラリ jQuery underscore.js
 残念なスコープの仕様
→ モジュール化を支援するライブラリ require.js
 View
(HTML)と密結合なりがち
→ MV*系フレームワーク Knockout.js
AngularJS Backbone.js
 そもそもJavaScript書きたくない
→ いわゆるAltJSたち CoffeeScript TypeScript JSX
3

4. AngularJS，最近流行ってるぽい
Google検索トレンド
Qiita2013アドベントカレンダー
ストック数比較
4

5. AngularJSのよろしいところ
発表目次
HTMLがそのままテンプレート
 双方向データバインディングによるModel・Viewの同期
 便利な組み込みserviceたち
 組み込みdirectiveによるリスト・フィルタなどの定番処理

今日は省略
Dependency Injectionによるモジュール性の向上
 Routing機構によって複数Viewを持つアプリも開発可能

5

6. テンプレートとしてのHTML, 双方向データバインディング
6
http://daisy1754.github.io/angular-simple-demo-flickr-cat/simplest-demo.html

7. テンプレートとしてのHTML, 双方向データバインディング
AngularJSを利用するアプリの宣言
yourNameモデルの値を表示
Inputタグ(View)とyourName
モデルの値をバインド
Inputタグの値の変化が
yourNameモデルに伝わり
Viewも変化する 7
http://daisy1754.github.io/angular-simple-demo-flickr-cat/simplest-demo.html

8. AngularJSで簡単に実現できるページの例
FlickrからJSON形式で持ってきた画像の表示 + インタラクティブに絞り込み
JS/HTMLあわせて40行くらい
8
http://daisy1754.github.io/angular-simple-demo-flickr-cat/flickr-cat.html

9. コード説明(1/3): API叩いてデータ取得
HTML
このbodyタグで囲まれる部分は
PhotoCtrlによって制御される
JavaScript
PhotoCtrlの宣言
組み込みの$httpを利用して，
flickrAPIにアクセス，結果のJSONを
9
そのままモデルに格納

10. コード説明(2/3): 取得結果リストを表示
Ng-repeatが指定されたタグは
繰り返し処理される
HTML
10

11. コード説明(3/3): リストのフィルタリング
HTML
titleFilterがtrueとなる要素のみ表示
JavaScript
11

12. まとめ
具体例を用いてAngularJSを紹介した
HTMLをテンプレート的に利用
 双方向データバインディング
 ng-repeatなどの便利directive
 $httpなどの便利service
により，コード量減りつつDOMを意識せず
クライアントサイドプログラミングができそう

12

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