Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

1,992 views

Published on

  • Be the first to comment

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

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

×