とりあえず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を導入してみませんか