1. とりあえずAngularJSを導
入してみませんか？
第3回 TKS Night
2014/05/24 K.Ono

2. 自己紹介/近況報告
 2014年1月からシェアゼロ株式会社のCTO
 PROsheetってサービスのシステムを開発してます
 フリーランスの人へ週2からのお仕事を紹介するサービス
 実はシェアゼロのCTO職も週3日
 2014年5月30日に澁谷で、フリーかフリーになりたいエ
ンジニア・デザイナーを集めてたこ焼き会をやります
 Chief Takoyaki Officer
 詳細は
 http://prosheet.jp/blog/event/1959/

3. AngularJS導入のきっかけ

4. ユーザー情報編集ページのリ
ニューアル
 元々 Single Page Application な作り
 画面遷移がなくDomの操作で表示切り替え
 元々JQueryで全体を構築していた
 これについてはほぼ引き継いだもの
 カオス…ViewとControllerを切り分けたい
 機能の変更は2割程度、8割は画面やフォームの変更
 使えるのは3日ほど

5. 方針
 JavaScriptのフレームワークを利用して可能な部分から
綺麗にしていく
 ただし、時間が無いので既存のJQueryのコードやサー
バー周りは流用する

6. フレームワーク選定
 メジャーどころだと3種類
 AngularJS
 Backbone.js
 Knockout.js

7. なぜAngularJSなのか

8. 流行ってるから

9. 検索しやすそう
 公式サイトの表記・一般的な表記
 Backbone.js
 Knockout/Knockout.js
 AngularJS
 Backbone.js
 フレームワークのことかJSファイルのことかわかりづらい
 Knockout/Knockout.js
 Knockoutは一般名詞なのでノイズが…
 AngularJS
 わかりやすい！

10. 他に
 周りにも利用者が増えてきている
 深くまで使い込むのは大変そうだが、とりあえずの導入
はJQueryと共存もできるので容易そう
 ※JQueryとの共存は他のフレームワークでも可能
 Backbone.js はJQueryに依存しているが、Knockout.js
AngularJSは分離可能
 後々JQueryからAngularJS組み込みのjQLiteに移行すること
で軽量化が図れそう

11. とりあえず導入してみよう
 追記箇所はたった2行
① html に ng-app
② AngularJSを読み込む
とっても簡単！
① ng-app
② angular.js

12. 一部機能をAngularJSで実装
してみる
HTMLファイルは
https://github.com/kenji0302/tks_3rd
に

13. 01.テキストボックスの値をHTML
に反映 - JQueryの場合
http://kenji0302.github.io/tks_3rd/01_JQuery_text.html

14. 02.テキストボックスの値をHTML
に反映 - AngularJSの場合
http://kenji0302.github.io/tks_3rd/02_AngularJS_text.html

15. 03.もちろん共存もできるよ
http://kenji0302.github.io/tks_3rd/03_AngularJSJQuery_text.html

16. 04.入力内容に応じた表示切替
 この程度であればコードを記述する必要なし！
http://kenji0302.github.io/tks_3rd/04_AngularJS_show_hide.html

17. 05.セレクトメニューを生成
 配列を入れるとOPTION生成
 サーバーからJSONでデータ取得すればSELECTメニュー生成す
るのも簡単
http://kenji0302.github.io/tks_3rd/05_AngularJS_select.html

18. AngularJSはとっても便利
 簡単なものであればコードを書かずに実装可能
 修正に時間がかかるところはJQuery実装のままで大丈夫
 controllerやtemplate、routing、directiveなどと機能も
豊富
 そのあたりはもう少し使いこなしてから…

19. さあみんなもAngularJSを導
入してみよう！