![ご注意！
オレオレ(独りよがり)な所も多々ございます。
ちゃんとした情報は公式サイトや書籍等をご覧ください。
!
!
!
!
!
!
!
!
!
!
公式サイト: https://angularjs.org/
AngularJSアプリケーション開発ガイド [大型本]](https://image.slidesharecdn.com/angularjsbeginner20140629-140629054326-phpapp01/85/AngularJS-4-320.jpg)
![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データを
持っており、データの加工を行います。](https://image.slidesharecdn.com/angularjsbeginner20140629-140629054326-phpapp01/85/AngularJS-8-320.jpg)
![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データを
持っており、データの加工を行います。](https://image.slidesharecdn.com/angularjsbeginner20140629-140629054326-phpapp01/85/AngularJS-9-320.jpg)
![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データ紐付け/](https://image.slidesharecdn.com/angularjsbeginner20140629-140629054326-phpapp01/85/AngularJS-10-320.jpg)
![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;
}
]);
ワタシハ?フタツノ?キノウヲ モテマス。
こんなサービスをテストすると…](https://image.slidesharecdn.com/angularjsbeginner20140629-140629054326-phpapp01/85/AngularJS-29-320.jpg)
![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);
});
!
});
});
チャント?ウゴイテマス
こんな風にテストできます。](https://image.slidesharecdn.com/angularjsbeginner20140629-140629054326-phpapp01/85/AngularJS-30-320.jpg)
More Related Content
What's hot (20)
Similar to 础苍驳耻濒补谤闯厂入门の巻２ (20)
More from Toshio Ehara (20)
![Cocos2d/2d-x/html5 [Objective-C/C++/JavaScript] 好みの言語はどれですか？](https://cdn.slidesharecdn.com/ss_thumbnails/ltcocos20130608obccppjs-130609185929-phpapp02-thumbnail.jpg?width=560&fit=bounds)
础苍驳耻濒补谤闯厂入门の巻２
- 1. 2014/6/29(日) 第9回福岡市西区プログラム勉強会 础苍驳耻濒补谤闯厂入门の巻２ 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); }); ! }); }); チャント?ウゴイテマス こんな風にテストできます。