AngularJS入門の巻２

2014/6/29(日) 第9回福岡市西区プログラム勉強会

AngularJS入門の巻２

Photo by Web制作向け無料写真素材／ぱくたそ http://www.pakutaso.com

http://www.pakutaso.com

-自己紹介-

株式会社キャムの江原と申します。

プログラマしてます。

twitter : @itokami1123

企業の経営戦略に役立つサービス「CAM MACS」を

AWSにて提供してます。

この資料は、2014/5/11(日) 第8回福岡市西区プログラム

勉強会の続きになります。

変なとこ、意味が分かんないとこがあったら

ツッコミをお願いしますね。 (@itokami1123まで)

ご注意！

オレオレ(独りよがり)な所も多々ございます。ちゃんとした情報は公式サイトや書籍等をご覧ください。 !!!!!!!!!!

公式サイト: https://angularjs.org/

AngularJSアプリケーション開発ガイド [大型本]

https://angularjs.org/

- 今日の内容 -

1. 前回の内容を図で復習の巻

2. 値を入力してみようの巻

3. どんな風に監視してんのの巻

4. 繰り返し表示も出来るよの巻

5. サービスの動きを検査しようの巻

1.前回の内容を図で復習の巻

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


services

app

controllers

calculatorServ

numDataModel


CalculatorCtrl DOM

angular.module






!angular.module(“services"). ! factory(“calculatorServ",[ ! "NumDataModel", function(NumDataModel){ var numData = new NumDataModel(); return { addLeft : function(){ numData.leftValue++; }, ! getNumData: function(){ return numData; } }; }]); !!!

ServiceモジュールがModelデータを持っており、データの加工を行います。


services

app

controllers

calculatorServ

numDataModel


CalculatorCtrl DOM

angular.module






!angular.module(“services"). ! factory(“calculatorServ",[ ! "NumDataModel", function(NumDataModel){ var numData = new NumDataModel(); return { addLeft : function(){ numData.leftValue++; }, ! getNumData: function(){ return numData; } }; }]); !!!

ServiceモジュールがModelデータを持っており、データの加工を行います。


services

app

controllers

calculatorServ

numDataModel


CalculatorCtrl DOM

angular.module





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データ紐付け/

2.値を入力してみようの巻

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" />

!<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>


10 + 20 = 30

inputで入力数値を変更すると即時反映されます。

services

app

controllers

calculatorServ CalculatorCtrl DOM

angular.module

$scope.numData

{{numData}}

さっきの図で説明するとこんな感じです


HTML

input type="number" ng-model=

"numData.leftValue"


numDataModel

画面に表示されている実際のデータはココに格納されている

input type="number" ng-model=

"numData.rightValue"

ng-bind

3.どんな風に監視してんのの巻

どんなタイミングでどんな風に値の変更を監視してるのかなぁ…

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のタイマーイベント

じーっと監視中

http://hoge.fuga

http://qiita.com/zoetro/items/5156aef51222e81dd022

http://angularjsninja.com/blog/2013/12/13/angularjs-watch/

変更のキッカケがあるとAngularJSはどこを確認するのでしょうか

( ∵ 3

ng-clickとかng-model とかDOM操作イベント

<input type="number" ng-model="numData.leftValue" />

おっ、変更の気配が…

1

10

6

合計：20

８に変更

$apply()を呼びます。

( ∵ 8

ng-model="hogehoge" とか {{fugafuga}} とか書くと

$watchの監視対照になります。変わったかどうかは、一つ一つ前回値と比較し再描画するか決めます。

1

10

6

合計：25

＼$digest ループ／

$watch

$watch

$watch

$watch

$watch

前は3 変更有再描画

前は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

1 $watch

1 $watch

1 $watch

データの変更は１個１個比較するので$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

1 $watch

1 $watch

1 $watch

1 $watch

将来的にJavaScriptにObject.observeという変更感知する仕組みがつくらしいです。早く全ブラウザに実装されてほしいなぁ～。

だ、大丈夫??

ぜ、ぜいぜい… 全Object見ないと何が変わったか分からんとよ..

T T

4.繰り返し表示も出来るよの巻

http://jsfiddle.net/itokami1123dev/aBPU5/2/

一覧表示と下に件数がでる画面を作ってみましょう〜。


<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の配列分繰り返します


<footer ng-controller="MenuFooterCtrl" > count : <span>{{menuCount}}</span> </footer> serviceにmenuList配列データがあるので他の

Controllerでも配列数が分かります。

<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

MenuFooterCtrlgetCount: function(){ return this.list. length; }

this.list

$scope.count

5.サービスの動きを検査しようの巻

Karma

今回はテストツールとしてKarma+Jasmineを使います

angular.mock

Jasmine

Chrome

AngularJS

node.js製のテスト実行環境

node.js

angular用のテストライブラリJSテスト記述ライブラリ

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; } ]);

ワタシハ　フタツノ　キノウヲモテマス。

こんなサービスをテストすると…

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); }); ! }); });

チャント　ウゴイテマス

こんな風にテストできます。

NetBeans8でKarma+Jasmineを動かすとこんな感じです。

NetBeans8+JS開発を一緒に勉強してくれる人 7/19(土) AipCafeでお待ちしております！

参加ページはこれから作ります。（^ ^;;

デモ

!

今日はココまでです！

!

次はもっとKarmaの事を詳しく説明したいと思います。

あと共通部品(Directive)とかAjax通信とかも

!

ご清聴ありがとうございました！

Documents

AngularJS入門の巻２