AngularJS入門の巻2

5,917 views

Published on

第9回福岡市西区プログラム勉強会
福岡の西の果てでIT系の総合勉強会

0 Comments
24 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
5,917
On SlideShare
0
From Embeds
0
Number of Embeds
175
Actions
Shares
0
Downloads
51
Comments
0
Likes
24
Embeds 0
No embeds

No notes for slide

AngularJS入門の巻2

  1. 1. 2014/6/29(日) 第9回福岡市西区プログラム勉強会 AngularJS入門の巻2 Photo by Web制作向け無料写真素材/ぱくたそ http://www.pakutaso.com
  2. 2. -自己紹介- 株式会社キャムの江原と申します。 プログラマしてます。 twitter : @itokami1123 企業の経営戦略に役立つサービス「CAM MACS」を AWSにて提供してます。
  3. 3. この資料は、2014/5/11(日) 第8回福岡市西区プログラム 勉強会の続きになります。 変なとこ、意味が分かんないとこがあったら ツッコミをお願いしますね。 (@itokami1123まで)
  4. 4. ご注意! オレオレ(独りよがり)な所も多々ございます。 ちゃんとした情報は公式サイトや書籍等をご覧ください。 ! ! ! ! ! ! ! ! ! ! 公式サイト: https://angularjs.org/ AngularJSアプリケーション開発ガイド [大型本]
  5. 5. - 今日の内容 - 1. 前回の内容を図で復習の巻 2. 値を入力してみようの巻 3. どんな風に監視してんのの巻 4. 繰り返し表示も出来るよの巻 5. サービスの動きを検査しようの巻
  6. 6. 1.前回の内容を図で復習の巻
  7. 7. addLeft : function(){ numData.leftValue++; } services app controllers calculatorServ numDataModel http://jsfiddle.net/itokami1123dev/b3mTU/1/ CalculatorCtrl DOM angular.module $scope.numData {{numData}} ng-click= "plusBtnlicked()" $scope. plusBtnlicked 前回の内容を図で復習してみましょう! getNumData: function(){ return numData; } HTML
  8. 8. addLeft : function(){ numData.leftValue++; } services app controllers calculatorServ numDataModel http://jsfiddle.net/itokami1123dev/b3mTU/1/ CalculatorCtrl DOM angular.module $scope.numData {{numData}} ng-click= "plusBtnlicked()" $scope. plusBtnlicked 前回の内容を図で復習してみましょう! getNumData: function(){ return numData; } ! angular.module(“services"). ! factory(“calculatorServ",[ ! "NumDataModel", function(NumDataModel){ var numData = new NumDataModel(); return { addLeft : function(){ numData.leftValue++; }, ! getNumData: function(){ return numData; } }; }]); ! ! ! ServiceモジュールがModelデータを 持っており、データの加工を行います。
  9. 9. addLeft : function(){ numData.leftValue++; } services app controllers calculatorServ numDataModel http://jsfiddle.net/itokami1123dev/b3mTU/1/ CalculatorCtrl DOM angular.module $scope.numData {{numData}} ng-click= "plusBtnlicked()" $scope. plusBtnlicked 前回の内容を図で復習してみましょう! getNumData: function(){ return numData; } ! angular.module(“services"). ! factory(“calculatorServ",[ ! "NumDataModel", function(NumDataModel){ var numData = new NumDataModel(); return { addLeft : function(){ numData.leftValue++; }, ! getNumData: function(){ return numData; } }; }]); ! ! ! ServiceモジュールがModelデータを 持っており、データの加工を行います。
  10. 10. addLeft : function(){ numData.leftValue++; } services app controllers calculatorServ numDataModel http://jsfiddle.net/itokami1123dev/b3mTU/1/ CalculatorCtrl DOM angular.module $scope.numData {{numData}} ng-click= "plusBtnlicked()" $scope. plusBtnlicked 前回の内容を図で復習してみましょう! getNumData: function(){ return numData; } angular.module(“controllers"). controller(“CalculatorCtrl",[ "$scope","calculatorServ", function($scope,calculatorServ){ $scope.numData = calculatorServ.getNumData(); $scope.plusBtnClicked = function (){ calculatorServ.addLeft(); }; }]); Controllerにて$scopeを経由して DOMとサービスを紐付けます /イベントの紐付け Modelデータ紐付け/
  11. 11. 2.値を入力してみようの巻
  12. 12. http://jsfiddle.net/itokami1123dev/xvN3a/ 10 + 20 = 30 データ入力のinputタグにデータを紐づける時は ng-modelでデータと紐づけます。 データの表示は ng-bind <p>{{hoge}}</p> と <p ng-bind="hoge" /> ! データの入力表示は ng-model <input type="number" ng-model="hoge" />
  13. 13. ! <div ng-app="app" class="main-contents" > <div ng-controller="CalculatorCtrl" > <input type="number" ng-model="numData.leftValue" /> + <input type="number" ng-model="numData.rightValue" /> = {{numData.compute()}} <button ng-click="plusBtnClicked()" class="btn btn- default" >plus1</button> </div> </div> http://jsfiddle.net/itokami1123dev/xvN3a/ 10 + 20 = 30 inputで入力数値を変更すると即時反映されます。
  14. 14. services app controllers calculatorServ CalculatorCtrl DOM angular.module $scope.numData {{numData}} さっきの図で説明するとこんな感じです getNumData: function(){ return numData; } HTML input type="number" ng-model= "numData.leftValue" http://jsfiddle.net/itokami1123dev/xvN3a/ numDataModel 画面に表示されている実際のデー タはココに格納されている input type="number" ng-model= "numData.rightValue" ng-bind
  15. 15. 3.どんな風に監視してんのの巻
  16. 16. どんなタイミングで どんな風に値の変更を 監視してるのかなぁ…
  17. 17. http://hoge.fuga…. サーバ( 10 + 20 = 30 クリアボタン 値の変更は下記タイミングで確認しています。 下記を参考にしております。ありがとうございます。 AngularJSのパフォーマンス改善入門 http://qiita.com/zoetro/items/5156aef51222e81dd022 AngularJS のデータバインドを支える$watch http://angularjsninja.com/blog/2013/12/13/angularjs-watch/ ぐふふ…大体こいつらを見張ってお けばデータの変化は気づくよね $location(URL)の変化 ng-clickとかng-model とかDOM操作イベント $http、$resourceなど サーバ側からの応答 $timeoutのタイマーイベント じーっと監視中
  18. 18. 変更のキッカケがあるとAngularJSはどこを確認するのでしょうか ( 3 ng-clickとかng-model とかDOM操作イベント <input type="number" ng-model="numData.leftValue" /> おっ、変更の気配が… 1 10 6 合計:20 8に変更 $apply()を呼びます。
  19. 19. ( 8 ng-model="hogehoge" とか {{fugafuga}} とか書くと $watchの監視対照になります。 変わったかどうかは、一つ一つ前回値と比較し再描画するか決めます。 1 10 6 合計:25 \$digest ループ/ $watch $watch $watch $watch $watch 前は3 変更有 再描画 前は20 変更有 再描画
  20. 20. ( 1 だ、だいじぇすと.. ループ… $watch 1 $watch 1 $watch 1 $watch 1 $watch 1 $watch 1 $watch 1 $watch 1 $watch 1 $watch 1 $watch 1 $watch 1 $watch 1 $watch $watch 1 $watch データの変更は1個1個比較するので$watch対象多いと重くなる傾向があ るみたいですね… なんか大変そうだなぁ ぜ、ぜいぜい…
  21. 21. ( 1 だ、だいじぇすと.. ループ… $watch 1 $watch 1 $watch 1 $watch 1 $watch 1 $watch 1 $watch 1 $watch 1 $watch 1 $watch 1 $watch 1 $watch 1 $watch 1 $watch $watch 1 $watch 将来的にJavaScriptにObject.observeという変更感知する仕組みがつ くらしいです。早く全ブラウザに実装されてほしいなぁ∼。 だ、大丈夫?? ぜ、ぜいぜい… 全Object見ないと 何が変わったか 分からんとよ.. T T
  22. 22. 4.繰り返し表示も出来るよの巻
  23. 23. http://jsfiddle.net/itokami1123dev/aBPU5/2/ 一覧表示と下に件数がでる画面を作ってみましょう〜。
  24. 24. 一覧表示と下に件数がでる画面を作ってみましょう〜。 <table class="table" ng-controller="MenuListCtrl" > <tr ng-repeat="item in menuList" > <td>{{item.id}}</td> <td>{{item.name}}</td> <td>{{item.price}}</td> </tr> </table> menuListの配列分繰り返します
  25. 25. 一覧表示と下に件数がでる画面を作ってみましょう〜。 <footer ng-controller="MenuFooterCtrl" > count : <span>{{menuCount}}</span> </footer> serviceにmenuList配列データがあるので他の Controllerでも配列数が分かります。
  26. 26. <table ng-controller="ListCtrl" > <tr ng-repeat="item in list" > <td>{{item.id}}</td> <td>{{item.name}}</td> <td>{{item.price}}</td> </tr> </table> <footer ng-controller="FooterCtrl" > count : <span>{{count}}</span> </footer> services app controllers menuListServ MenuListCtrl DOM angular.module $scope.list さっきの図で説明するとこんな感じです。 getList: function(){ return this.list; } HTML MenuFooterCtrl getCount: function(){ return this.list. length; } this.list $scope.count
  27. 27. 5.サービスの動きを検査しようの巻
  28. 28. Karma 今回はテストツールとしてKarma+Jasmineを使います angular.mock Jasmine Chrome AngularJS node.js製のテスト実行環境 node.js angular用のテストライブラリJSテスト記述ライブラリ
  29. 29. angular.module("services"). factory("Dogaemon", [ function() { "use strict"; var Dogaemon = function() {}; Dogaemon.prototype = { constructor: Dogaemon, say: function() { return "お∼い、のびよ。"; }, computeSum: function(nums){ var sum = 0; angular.forEach(nums,function(num){ sum += num; }); return sum; } }; return Dogaemon; } ]); ワタシハ フタツノ キノウヲ モテマス。 こんなサービスをテストすると…
  30. 30. describe("services", function() { "use strict"; beforeEach(module("services")); describe("Dogaemonについて", function() { var dogaemon; beforeEach(inject(function(Dogaemon) { dogaemon = new Dogaemon(); })); ! it("それは、のびを呼びかける", function() { expect(dogaemon.say()).toEqual("お∼い、のびよ。"); }); ! it("それは、数値配列の合計を計算出来る", function() { var test = [3, 4, 5]; expect(dogaemon.computeSum(test)).toEqual(12); }); ! }); }); チャント ウゴイテマス こんな風にテストできます。
  31. 31. NetBeans8でKarma+Jasmineを動かすとこんな感じです。 NetBeans8+JS開発を一緒に勉強してくれる人 7/19(土) AipCafeでお待ちしております! 参加ページはこれから作ります。(^ ^;; デ モ
  32. 32. ! 今日はココまでです! ! 次はもっとKarmaの事を詳しく説明したいと思います。 あと共通部品(Directive)とかAjax通信とかも ! ご清聴ありがとうございました!

×