とりあえず 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 種類

AngularJSBackbone.jsKnockout.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を導入してみよう！