受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG
•
77 gefällt mir•24,048 views
LIGで行われたAngularJS勉強会に登壇したときのスライドです。 受託開発でAngularJSを採用したときに懸念したことや導入した結果感じたことなどを発表しました。 ■目次 ・AngularJSを使うときに懸念したこと ・チャットアプリでAngularJS ・AngularJSを使うなら知っておきたいワード ・AngularJSの進化のスピード 勉強会で使用したサンプルはGithubで公開しています。 https://github.com/frontainer/angular-sample
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Andere mochten auch
Andere mochten auch (19)
Ähnlich wie 受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG
Ähnlich wie 受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG (20)
Mehr von Hayashi Yuichi
Mehr von Hayashi Yuichi (13)
Kürzlich hochgeladen
Kürzlich hochgeladen (7)
受託開発でのAngularJS - 第1回AngularJS 勉強会 at LIG
- 5. CM
- 6. CM
- 7. CM
- 8. CM
- 9. CM
- 15. 15 01 IE9以上+モダンブラウザ AngularJSを使うときに懸念したこと 対応ブラウザ バージョン 1.2.x 1.3.x 2.x.x 対応ブラウザ IE8 IE9 IE11(予定) 備考 IE8以下は一部機能で別途対策が必要 I積極的な機能削除は行わないが E8はテストを行わない 開発中 推奨
- 16. 20.6% 5.4% 6.9% 8.6% 8.9%12.3% 16.6% 20.9% IE8.0 IE11.0 FF28 IE9.0 Chrome34 IE10.0 Chrome33 その他 16http://news.mynavi.jp/news/2014/05/07/066/ 現実 IE8以上+モダンブラウザ
- 18. 18 ng-app属性をつけている要素に id=“ng-app”をつける <div id=“ng-app” ng-app=“app”> … </div> 対策１- ng-app 独自タグは使わず、属性にする Directiveのrestrictは”E”だけでなく”EA”としておくと吉 <ng-view></ng-view> <ng-include></ng-include> 対策２- 独自タグ <div ng-view></div> <div ng-include></div> AngularJSを使うときに懸念したこと
- 19. 19 独自タグを使いたい場合は、 HTMLにプレフィックス指定をして JSでcreateElementする 対策３- 独自タグ２ <html xmlns:ng="http://angularjs.org"> <head> <!--[if lte IE 8]> <script> document.createElement('ng-include'); document.createElement('ng-view'); ! // Optionally these for CSS document.createElement('ng:include'); document.createElement('ng:view'); </script> <![endif]--> </head> AngularJSを使うときに懸念したこと
- 20. 20 json2.jsまたはjson3.jsを使う 対策４- IE7のために <script src=“/path/to/json2.json”></script> json2.js https://github.com/douglascrockford/JSON-js json3.js http://bestiejs.github.io/json3/ でもIE7対応するならばAngularを使わない方が良いと思う -> Backbone • パフォーマンス • バグが見つかったとしても修正される可能性が低い AngularJSを使うときに懸念したこと
- 22. 22 02 AngularJSを使うときに懸念したこと 学習コスト 学習コストが高いと・・・ • 挫折しやすい • 開発に時間がかかる • チームメンバーの増減が難しくなる などなど、問題多数
- 32. 32 チャットアプリでAngularJS Socket-Service angular.module("services").factory("SocketService",function($rootScope){ if (typeof io === 'undefined') return; var socket = io.connect('http://'+location.host + '/'); return { on: function (type, listener) { socket.on(type, function () { var args = arguments; $rootScope.$apply(function () { listener.apply(socket, args); }); }); }, emit: function (type, data, listener) { socket.emit(type, data, function () { var args = arguments; $rootScope.$apply(function () { if (listener) { listener.apply(socket, args); } }); }); } }; });
- 33. 33 チャットアプリでAngularJS Controller angular.module('controllers').controller('RoomCtrl',function($scope,SocketService) { $scope.messages = []; SocketService.on('receive', function(message) { $scope.messages.unshift(message); }); $scope.send = function() { SocketService.emit(‘send’,$scope.form.message); }; }
- 34. 34 チャットアプリでAngularJS View <div ng-repeat="message in messages"> {{message}} </div> <form ng-submit="send"> <textarea ng-model=“form.message"></textarea> <input type="submit" value="送信" /> </form>
- 35. 35 チャットアプリでAngularJS Node.js var SocketIO = require('socket.io'); ! exports.init = function(server) { var io = SocketIO.listen(server, {log:false}); io.sockets.on('connection', function(socket) { socket.on('send',function(message) { io.sockets.emit('receive',{ message: message, date: new Date() }); }); }); };
- 36. 36 実演
- 38. 38 フォームバリデーション チャットアプリでAngularJS required属性など非対応ブラウザでも対応してくれる(Polyfill) ng-required属性を使うと条件付き必須が簡単に実装できる エラー時にスタイルを変えたり、Submitボタンをdisabledしたりもできる <form name="validation_form"> <label> <input type="radio" ng-model="form.exp" name="exp" value="exp1" checked> 条件1 </label> <label> <input type="radio" ng-model="form.exp" name="exp" value="exp2"> 条件2 </label> <div ng-show="form.exp === 'exp1'" class="ng-cloak"> <input type="text" ng-required="form.exp === 'exp1'" ng-model="form.exp1.required" /> </div> <div ng-show="form.exp === 'exp2'" class="ng-cloak"> <input type="text" ng-required="form.exp === 'exp2'" ng-model="form.exp2.required" /> </div> <input type="submit" ng-disabled="validation_form.$invalid"/> </form>
- 39. 39 フィルタリング チャットアプリでAngularJS 日付フォーマットやソートなどのフィルタ機能 自作フィルタも比較的簡単に実装できる このフィルタを増やしているだけでもわくわくする angular.module('filters').filter('lineBreak', function() { return function(input,exp) { return input.replace(/n|r/g, "<br>"); } }); ※改行コードをbrにする自作フィルタ <div class="form-group"> <input type="text" class="form-control" ng-model="input_date"/> <p>{{input_date}}</p> <p>{{input_date | date: 'yyyy/MM/dd HH/mm'}}</p> </div>
- 40. 40 アニメーション チャットアプリでAngularJS angular-animateモジュールを使うと要素追加や削除時などに 簡単にアニメーションをつけることができる。 ngAnimate.cssを使うとすぐに出来上がる モック作りに最適で、初期の動きのイメージに使用 <div class="list-group"> <div ng-repeat="message in messages" class="slide-left list-group-item"> <div>{{message}}</div> </div> </div> $ bower install ngAnimate https://github.com/Augus/ngAnimate
- 41. 41 Ajax通信とセキュリティ チャットアプリでAngularJS app.config(['$httpProvider',function($httpProvider) { $httpProvider.defaults.headers.common = {'X-Requested-With': 'XMLHttpRequest'}; }]); CSRF対策としてヘッダーとCookieでやり取り → フォームにhiddenなinputを設置しなくてよい デフォルトでX-Requested-With: “XMLHttpRequest”がついていない app初期化時につけておくと良い
- 42. 42 実演
- 45. GruntとAngularJSのMinify Karma / Jasmine YeomanとAngular Generator 45 AngularJSを使うなら知っておきたいワード 今回はワードの紹介のみですが・・・ AngularJS Batarang (Chrome拡張） Angular Batarang以外は他のフレームワークでも使えるものです。 今後、それぞれ勉強会を開催できればと思ってます。
- 47. 40回?! 47 頻繁なバージョンアップと定期的な開発 AngularJSの進化スピード 0.9.0-0.9.8 2010.10 2011 2012 2013 0.9.8-0.10.5 0.10.5 - 1.0.4 1.1.0 - 1.1.1 1.0.4 - 1.0.8 1.1.1 - 1.2.6 2010 2014 1.2.6 - 1.2.16 1.3.0 (β1) - 1.3.0 (β10) 2.0.0 - 8回 17回 19回 19回 20回
- 50. 50 まとめ
- 52. 52 まとめ AngularJSって難しいんでしょ 社員A 使うのはかなり簡単 • 使うのは非常に簡単 • ちょっとしたコードですぐにそれっぽいものができる • でもディレクティブ辺りでだいたい１度つまづく • 本当に使いこなそうとすると先は長い 社員B 覚えること多くて面倒くさそう 覚えることは多い • ng-なんちゃらが多くて覚えるのは大変 • 他のフレームワークやライブラリにあまり似ていないので、 過去の経験は活かしにくい • 公式ドキュメントを見ながらが基本になる
- 53. 53 まとめ 他のフレームワークより 学習コストが高いらしい Nobisuke ドキュメントが少なくて調べるの 大変そう CTO フルスタックフレームワークだもの • 機能が多い分、学習すべき項目は多い • でもいろんなライブラリを覚える必要が少ない • 一貫したルールで作れるので最終的には管理しやすい 日本語ドキュメントは少ない？ • js-studio (http://js.studio-kingdom.com/angularjs) • ドットインストール (http://dotinstall.com/lessons/ basic_angularjs) • AngularJS Ninja (http://angularjsninja.com/) ドキュメントは公式が無難 -> ゆえに英語必須
- 56. 56 まとめ CMのあと次回予告