2014/5/11(日)第8回福岡市西区プログラム勉強会 ”福岡の西の果てでIT系の総合勉強会”

1. 2014/5/11(日) 第8回福岡市西区プログラム勉強会
AngularJS入門の巻
Photo by Web制作向け無料写真素材／ぱくたそ http://www.pakutaso.com

2. -自己紹介-
株式会社キャムの江原と申します。
プログラマしてます。
twitter : @itokami1123
企業の経営戦略に役立つサービス「CAM MACS」を
AWSにて提供してます。

3. 今日はAngularJS知識を整理するため
自分なりに理解した事をなるべく分かり易く説明します。
変なとこ、意味が分かんないとこがあったら
ツッコミをお願いしますね。 (@itokami1123まで)

4. 2014/5/11(日) 第8回福岡市西区プログラム勉強会
AngularJS入門
ご注意！
オレオレ(独りよがり)な所も多々ございます。
ちゃんとした情報は公式サイトや書籍等をご覧ください。
!
!
!
!
!
!
!
!
!
!
公式サイト: https://angularjs.org/
AngularJSアプリケーション開発ガイド [大型本]

5. - 今日の内容 -
1. 立ち上がれAngularの巻
2. moduleは俺のロッカーの巻
3. 依存してしまおうの巻
4. ブラウザ(DOM)に値を表示の巻
5. データ管理はサービスよの巻
6. データの反映は何時？の巻

6. 1.立ち上がれAngularの巻

7. <script src=“//ajax.googleapis.com/ajax/libs/jquery/
2.1.0/jquery.min.js”></script>
!
!
!
<script src="https://ajax.googleapis.com/ajax/libs/
angularjs/1.3.0-beta.7/angular.min.js" ></script>
!
!
<div class="jsTestApp" >
{{ 1+1 }}
</div>
AngularJSのライブラリです！
AngularJSの機能で {{ 1+1 }} で２が表示されるはずが..
※jQueryも使いたい為に先に読み込んでます。(AngularJSに必要ではありません)

8. {{ 1+1 }}
AngularJSの機能で {{ 1+1 }} で２が表示されるはずが、動いてない…

9. $(function(){
$testApp = $(".jsTestApp");
angular.bootstrap( $testApp[0] );
});
AngularJSで起動したいHTMLタグ要素を bootstrapで指定すると
<div class="jsTestApp" >
{{ 1+1 }}
</div>
2
動いた！やったー！
http://jsfiddle.net/itokami1123dev/TqEpb/2/

10. $(function(){
$testApp = $(".jsTestApp");
angular.bootstrap( $testApp[0] );
});
<div ng-app="" >
{{ 1+1 }}
</div>
2
ng-app(ngAppディレクティブ)で書くとすっきりしますね。
http://jsfiddle.net/itokami1123dev/bp4Ae/
ng-appを記述すれば、起動(bootstrap)処理を書かなくて良いです！

11. 2.moduleは俺のロッカーの巻

12. angular.module("app",[]);
appという名前の箱(名前空間)を作る事が出来ます！
<div ng-app="app" >
{{ 1+1 }}
</div>
ng-appで指定した箱(名前空間)を使います。
http://jsfiddle.net/itokami1123dev/8L2aR/1/

13. angular.module("services",[]);
angular.module("controllers",[]);
angular.module("app",["services","controllers"]);
名前の箱(名前空間)は、他の箱(名前空間)を第２引数に配列で設定出来ます。
<div ng-app="app" >
{{ 1+1 }}
</div>
http://jsfiddle.net/itokami1123dev/KY6rz/7/

14. angular.module("services",[]);
angular.module("controllers",[]);
angular.module("app",["services","controllers"]);
angular.module("controllers").
controller("CalculatorCtrl",[
"$scope",
http://jsfiddle.net/itokami1123dev/KY6rz/7/
名前の箱(名前空間)は、第２引数無しで取り出す事が出来ます。

15. 3.依存してしまおうの巻

16. http://jsfiddle.net/itokami1123dev/rqGda/1/
angular.module(“services",[]);
!
angular.module("services").
factory("Ken",[
!
function(){
var Ken = function(){
this.name = "kenshiro";
};
Ken.prototype = {
constructor: Ken,
say: function(){
return "My name is " + this.name;
}
};
return Ken;
}
!
]);
下準備として、 services という名前のmoduleを作成します
services moduleに Kenクラス を登録します。

17. <div ng-app="services" ></div>
services moduleを起動するとrunメソッドが呼ばれます。
http://jsfiddle.net/itokami1123dev/rqGda/1/
angular.module(“services”).run([
!
!
!
“Ken",
!
!
!
function( Ken ){
!
var ken = new Ken();
console.log( ken.say());
}
]);
services moduleに登録した各機能は
名称文字列で取得できます。
カンマ区切りで複数指定出来ます。
module
Ken
実行時に 引数に渡されます。
Ken機能を使ってる（依存してます)

18. ４.ブラウザ(DOM)に値を表示の巻

19. angular.module("controllers").
controller("CalculatorCtrl",[
"$scope",
function($scope){
!
}]);
controllers moduleに ブラウザ(HTML)をコントロールする機能を登録します。
<div ng-app="app" >
<div ng-controller="CalculatorCtrl" >
{{leftValue}} + {{rightValue}} =
{{leftValue+rightValue}}
</div>
</div>
http://jsfiddle.net/itokami1123dev/SZyy9/2/
$scope
ng-controllerは、$scopeという表示データ格納モデルを作ります。
作成した$scopeは controller実行時に使用出来ます。

20. angular.module("controllers").
controller("CalculatorCtrl",[
"$scope",
function($scope){
$scope.leftValue = 10;
$scope.rightValue = 20;
}]);
<div ng-app="app" >
<div ng-controller="CalculatorCtrl" >
{{leftValue}} + {{rightValue}} =
{{leftValue+rightValue}}
</div>
</div>
http://jsfiddle.net/itokami1123dev/SZyy9/2/
$scopeのプロパティが
10 + 20 = 30反映されます！

21. 5.データ管理はサービスよの巻

22. <div ng-app="app" >
<div ng-controller="CalculatorCtrl" >
{{leftValue}} + {{rightValue}} =
{{leftValue+rightValue}}
</div>
</div>
angular.module("controllers").
controller("CalculatorCtrl",[
"$scope",
function($scope){
$scope.xxx = 1 + 1 + ….;
!
}]);
データの計算式はモデルやサービスに移しましょう∼。
HTML内に計算式があったり…
Controller内に計算式があったり
…
とっても参考になる記事：お前のAngular.jsはもうMVCではない。と言われないためのTutorial
http://qiita.com/icoxfog417/items/2ac773c33a8b34288551

23. angular.module("services").
factory(“NumDataModel",[
function(){
var NumDataModel = function(){
this.leftValue = 10;
this.rightValue = 20;
};
NumDataModel.prototype = {
constructor: NumDataModel,
compute: function(){
return this.leftValue + this.rightValue;
}
};
return NumDataModel;
}
]);
http://jsfiddle.net/itokami1123dev/9x2Zh/3/
足し算をするクラスを
NumDataModel という名前で
登録します

24. angular.module("services").
factory("calculatorServ",[
"NumDataModel",
function(NumDataModel){
var numData = new NumDataModel();
return {
getNumData: function(){
return numData;
}
};
}
]);
http://jsfiddle.net/itokami1123dev/9x2Zh/3/
NumDataModelクラスを管理する
calculatorServ オブジェクトを登録します

25. angular.module("controllers").
controller("CalculatorCtrl",[
"$scope","calculatorServ",
function($scope, calculatorServ){
$scope.numData = calculatorServ.getNumData();
}
]);
http://jsfiddle.net/itokami1123dev/9x2Zh/3/
<div ng-app="app" >
<div ng-controller="CalculatorCtrl" >
{{numData.leftValue}} +
{{numData.rightValue}} =
{{numData.compute()}}
</div>
</div> これでHTMLにもControllerにも計算式が出なくなりましたね！

26. 6.データの反映は何時？の巻

27. ところで$scopeのプロパティは
いつ画面に反映するの？？

28. angular.module("services").
factory("calculatorServ",[
“NumDataModel",
function(NumDataModel){
var numData = new NumDataModel();
return {
addLeft : function(){
numData.leftValue++;
},
!
!
getNumData: function(){
return numData;
}
};
}
]);
http://jsfiddle.net/itokami1123dev/92prV/2/
左の数値データを増やすメソッドを追加して..

29. angular.module("controllers").
controller("CalculatorCtrl",[
"$scope","calculatorServ",
function($scope,calculatorServ){
$scope.numData = calculatorServ.getNumData();
$('.js-btn').on('click',function(){
calculatorServ.addLeft();
});
}]);
http://jsfiddle.net/itokami1123dev/92prV/2/
<div ng-app="app" >
<button class="js-btn" >plus1</button>
</div>
ボタンクリックで数値を増やすメソッドを呼びます。

30. controller("CalculatorCtrl",[
// ・・・省略・・・
$('.js-btn').on('click',function(){
calculatorServ.addLeft();
});
// ・・・省略・・・
}]);
http://jsfiddle.net/itokami1123dev/92prV/2/
factory(“calculatorServ",[
// ・・・省略・・・
addLeft : function(){
numData.leftValue++;
},
// ・・・省略・・・
]);
10 + 20 = 30
plus1
押しても数値が増えない…？

31. controller("CalculatorCtrl",[
// ・・・省略・・・
$('.js-btn').on('click',function(){
$scope.$apply(function(){
calculatorServ.addLeft();
});
});
// ・・・省略・・・
}]);
http://jsfiddle.net/itokami1123dev/dK23V/
11 + 20 = 31
plus1
$applyを呼ぶと$scopeの中の変更を確認して画面に反映されます！

32. <div ng-controller="CalculatorCtrl" >
{{numData.leftValue}} +
{{numData.rightValue}} =
{{numData.compute()}}
<button ng-click="plusBtnClicked()" >plus1</button>
</div>
http://jsfiddle.net/itokami1123dev/b3mTU/1/
angular.module("controllers").
controller("CalculatorCtrl",[
"$scope","calculatorServ",
function($scope,calculatorServ){
// ・・・省略・・・
$scope.plusBtnClicked = function (){
calculatorServ.addLeft();
};
}]);
ng-clickは自動で$applyを呼ぶのですっきり書けますよ。

33. !
今日はココまでです！
!
今後もテストコード、描画のチューニング、共通部品
の作り方なども発表していきたいです。
!
ご清聴ありがとうございました！