Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
2014/6/29(日) 第9回福岡市西区プログラム勉強会
AngularJS入門の巻2
Photo by Web制作向け無料写真素材/ぱくたそ http://www.pakutaso.com
-自己紹介-
株式会社キャムの江原と申します。
プログラマしてます。
twitter : @itokami1123
企業の経営戦略に役立つサービス「CAM MACS」を
AWSにて提供してます。
この資料は、2014/5/11(日) 第8回福岡市西区プログラム
勉強会の続きになります。
変なとこ、意味が分かんないとこがあったら
ツッコミをお願いしますね。 (@itokami1123まで)
ご注意!
オレオレ(独りよがり)な所も多々ございます。
ちゃんとした情報は公式サイトや書籍等をご覧ください。
!
!
!
!
!
!
!
!
!
!
公式サイト: https://angularjs.org/
AngularJSアプリケーション...
- 今日の内容 -
1. 前回の内容を図で復習の巻
2. 値を入力してみようの巻
3. どんな風に監視してんのの巻
4. 繰り返し表示も出来るよの巻
5. サービスの動きを検査しようの巻
1.前回の内容を図で復習の巻
addLeft : function(){
numData.leftValue++;
}
services
app
controllers
calculatorServ
numDataModel
http://jsfiddle.net/itok...
addLeft : function(){
numData.leftValue++;
}
services
app
controllers
calculatorServ
numDataModel
http://jsfiddle.net/itok...
addLeft : function(){
numData.leftValue++;
}
services
app
controllers
calculatorServ
numDataModel
http://jsfiddle.net/itok...
addLeft : function(){
numData.leftValue++;
}
services
app
controllers
calculatorServ
numDataModel
http://jsfiddle.net/itok...
2.値を入力してみようの巻
http://jsfiddle.net/itokami1123dev/xvN3a/
10 + 20 = 30
データ入力のinputタグにデータを紐づける時は
ng-modelでデータと紐づけます。
データの表示は ng-bind
<p>{{h...
!
<div ng-app="app" class="main-contents" >
<div ng-controller="CalculatorCtrl" >
<input type="number" ng-model="numData.l...
services
app
controllers
calculatorServ CalculatorCtrl DOM
angular.module
$scope.numData
{{numData}}
さっきの図で説明するとこんな感じです
ge...
3.どんな風に監視してんのの巻
どんなタイミングで
どんな風に値の変更を
監視してるのかなぁ…
http://hoge.fuga….
サーバ(
10 + 20 = 30
クリアボタン
値の変更は下記タイミングで確認しています。
下記を参考にしております。ありがとうございます。
AngularJSのパフォーマンス改善入門 http://qi...
変更のキッカケがあるとAngularJSはどこを確認するのでしょうか
( 3
ng-clickとかng-model
とかDOM操作イベント
<input type="number" ng-model="numData.leftValue" />...
(
8
ng-model="hogehoge" とか {{fugafuga}} とか書くと
$watchの監視対照になります。
変わったかどうかは、一つ一つ前回値と比較し再描画するか決めます。
1
10
6
合計:25
\$digest ループ...
(
1
だ、だいじぇすと..
ループ…
$watch
1 $watch
1 $watch
1 $watch
1 $watch
1 $watch
1 $watch
1 $watch
1 $watch
1 $watch
1 $watch
1 $wa...
(
1
だ、だいじぇすと..
ループ…
$watch
1 $watch
1 $watch
1 $watch
1 $watch
1 $watch
1 $watch
1 $watch
1 $watch
1 $watch
1 $watch
1 $wa...
4.繰り返し表示も出来るよの巻
http://jsfiddle.net/itokami1123dev/aBPU5/2/
一覧表示と下に件数がでる画面を作ってみましょう〜。
一覧表示と下に件数がでる画面を作ってみましょう〜。
<table class="table" ng-controller="MenuListCtrl" >
<tr ng-repeat="item in menuList" >
<td>{{ite...
一覧表示と下に件数がでる画面を作ってみましょう〜。
<footer ng-controller="MenuFooterCtrl" >
count : <span>{{menuCount}}</span>
</footer>
serviceにme...
<table
ng-controller="ListCtrl" >
<tr ng-repeat="item in list" >
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.pr...
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.protot...
describe("services", function() {
"use strict";
beforeEach(module("services"));
describe("Dogaemonについて", function() {
var ...
NetBeans8でKarma+Jasmineを動かすとこんな感じです。
NetBeans8+JS開発を一緒に勉強してくれる人 7/19(土) AipCafeでお待ちしております!
参加ページはこれから作ります。(^ ^;;
デ
モ
!
今日はココまでです!
!
次はもっとKarmaの事を詳しく説明したいと思います。
あと共通部品(Directive)とかAjax通信とかも
!
ご清聴ありがとうございました!
Nächste SlideShare
Wird geladen in …5
×

AngularJS入門の巻2

6.328 Aufrufe

Veröffentlicht am

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

  • Follow the link, new dating source: ❤❤❤ http://bit.ly/2F90ZZC ❤❤❤
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • Dating for everyone is here: ♥♥♥ http://bit.ly/2F90ZZC ♥♥♥
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier

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通信とかも ! ご清聴ありがとうございました!

×