とりあえずAngularJSを導 入してみませんか? 第3回 TKS Night 2014/05/24 K.Ono
自己紹介/近況報告  2014年1月からシェアゼロ株式会社のCTO  PROsheetってサービスのシステムを開発してます  フリーランスの人へ週2からのお仕事を紹介するサービス  実はシェアゼロのCTO職も週3日  2014年5月30日に澁谷で、フリーかフリーになりたいエ ンジニア・デザイナーを集めてたこ焼き会をやります  Chief Takoyaki Officer  詳細は  http://prosheet.jp/blog/event/1959/
AngularJS導入のきっかけ
ユーザー情報編集ページのリ ニューアル  元々 Single Page Application な作り  画面遷移がなくDomの操作で表示切り替え  元々JQueryで全体を構築していた  これについてはほぼ引き継いだもの  カオス…ViewとControllerを切り分けたい  機能の変更は2割程度、8割は画面やフォームの変更  使えるのは3日ほど
方針  JavaScriptのフレームワークを利用して可能な部分から 綺麗にしていく  ただし、時間が無いので既存のJQueryのコードやサー バー周りは流用する
フレームワーク選定  メジャーどころだと3種類  AngularJS  Backbone.js  Knockout.js
なぜAngularJSなのか
流行ってるから
検索しやすそう  公式サイトの表記・一般的な表記  Backbone.js  Knockout/Knockout.js  AngularJS  Backbone.js  フレームワークのことかJSファイルのことかわかりづらい  Knockout/Knockout.js  Knockoutは一般名詞なのでノイズが…  AngularJS  わかりやすい!
他に  周りにも利用者が増えてきている  深くまで使い込むのは大変そうだが、とりあえずの導入 はJQueryと共存もできるので容易そう  ※JQueryとの共存は他のフレームワークでも可能  Backbone.js はJQueryに依存しているが、Knockout.js AngularJSは分離可能  後々JQueryからAngularJS組み込みのjQLiteに移行すること で軽量化が図れそう
とりあえず導入してみよう  追記箇所はたった2行 ① html に ng-app ② AngularJSを読み込む とっても簡単! ① ng-app ② angular.js
一部機能をAngularJSで実装 してみる HTMLファイルは https://github.com/kenji0302/tks_3rd に
01.テキストボックスの値をHTML に反映 - JQueryの場合 http://kenji0302.github.io/tks_3rd/01_JQuery_text.html
02.テキストボックスの値をHTML に反映 - AngularJSの場合 http://kenji0302.github.io/tks_3rd/02_AngularJS_text.html
03.もちろん共存もできるよ http://kenji0302.github.io/tks_3rd/03_AngularJSJQuery_text.html
04.入力内容に応じた表示切替  この程度であればコードを記述する必要なし! http://kenji0302.github.io/tks_3rd/04_AngularJS_show_hide.html
05.セレクトメニューを生成  配列を入れるとOPTION生成  サーバーからJSONでデータ取得すればSELECTメニュー生成す るのも簡単 http://kenji0302.github.io/tks_3rd/05_AngularJS_select.html
AngularJSはとっても便利  簡単なものであればコードを書かずに実装可能  修正に時間がかかるところはJQuery実装のままで大丈夫  controllerやtemplate、routing、directiveなどと機能も 豊富  そのあたりはもう少し使いこなしてから…
さあみんなもAngularJSを導 入してみよう!

とりあえずAngular jsを導入してみませんか