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