Mais conteúdo relacionado
Semelhante a AngularJS入門の巻2 (20)
Mais de Toshio Ehara (20)
AngularJS入門の巻2
- 5. - 今日の内容 -
1. 前回の内容を図で復習の巻
2. 値を入力してみようの巻
3. どんな風に監視してんのの巻
4. 繰り返し表示も出来るよの巻
5. サービスの動きを検査しようの巻
- 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で入力数値を変更すると即時反映されます。
- 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のタイマーイベント
じーっと監視中
- 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
- 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);
});
!
});
});
チャント ウゴイテマス
こんな風にテストできます。