Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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通信とかも
!
ご清聴ありがとうございました!
Upcoming SlideShare
Loading in …5
×

24

Share

Download to read offline

AngularJS入門の巻2

Download to read offline

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

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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

    Aug. 14, 2016
  • MakotoKobayashi1

    Jan. 8, 2016
  • tick3627

    Aug. 4, 2015
  • kojiyamaoka7

    Feb. 4, 2015
  • makotoohmori

    Nov. 2, 2014
  • ssuserd3036a

    Oct. 19, 2014
  • qunoster

    Aug. 18, 2014
  • kyonmaru

    Aug. 13, 2014
  • jonicco

    Aug. 5, 2014
  • tsubame9590206

    Aug. 1, 2014
  • hyoshita

    Aug. 1, 2014
  • asokatsumi

    Jul. 31, 2014
  • kamiyam

    Jul. 31, 2014
  • mitsuruogawa33

    Jul. 31, 2014
  • sagawafumio

    Jul. 30, 2014
  • tmhk_m

    Jul. 30, 2014
  • tomosmith

    Jul. 30, 2014
  • kaindu

    Jul. 30, 2014
  • tomof

    Jul. 30, 2014
  • KosukeIida

    Jul. 30, 2014

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

Views

Total views

6,695

On Slideshare

0

From embeds

0

Number of embeds

184

Actions

Downloads

53

Shares

0

Comments

0

Likes

24

×