Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Ähnlich wie AngularJS入門の巻２
Ähnlich wie AngularJS入門の巻２ (20)
Mehr von Toshio Ehara
Mehr von Toshio Ehara (20)
AngularJS入門の巻２
- 1. 2014/6/29(日) 第9回福岡市西区プログラム勉強会 AngularJS入門の巻２ Photo by Web制作向け無料写真素材／ぱくたそ http://www.pakutaso.com
- 2. -自己紹介- 株式会社キャムの江原と申します。 プログラマしてます。 twitter : @itokami1123 企業の経営戦略に役立つサービス「CAM MACS」を AWSにて提供してます。
- 3. この資料は、2014/5/11(日) 第8回福岡市西区プログラム 勉強会の続きになります。 変なとこ、意味が分かんないとこがあったら ツッコミをお願いしますね。 (@itokami1123まで)
- 5. - 今日の内容 - 1. 前回の内容を図で復習の巻 2. 値を入力してみようの巻 3. どんな風に監視してんのの巻 4. 繰り返し表示も出来るよの巻 5. サービスの動きを検査しようの巻
- 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. 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. 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. 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. 2.値を入力してみようの巻
- 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. ! <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. 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. 3.どんな風に監視してんのの巻
- 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. 変更のキッカケがあるとAngularJSはどこを確認するのでしょうか ( 3 ng-clickとかng-model とかDOM操作イベント <input type="number" ng-model="numData.leftValue" /> おっ、変更の気配が… 1 10 6 合計：20 ８に変更 $apply()を呼びます。
- 19. ( 8 ng-model="hogehoge" とか {{fugafuga}} とか書くと $watchの監視対照になります。 変わったかどうかは、一つ一つ前回値と比較し再描画するか決めます。 1 10 6 合計：25 ＼$digest ループ／ $watch $watch $watch $watch $watch 前は3 変更有 再描画 前は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 データの変更は１個１個比較するので$watch対象多いと重くなる傾向があ るみたいですね… なんか大変そうだなぁ ぜ、ぜいぜい…
- 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. 4.繰り返し表示も出来るよの巻
- 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. 一覧表示と下に件数がでる画面を作ってみましょう〜。 <footer ng-controller="MenuFooterCtrl" > count : <span>{{menuCount}}</span> </footer> serviceにmenuList配列データがあるので他の Controllerでも配列数が分かります。
- 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
- 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. 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); }); ! }); }); チャント ウゴイテマス こんな風にテストできます。