AngularJS入門の巻

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

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

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

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

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

1.立ち上がれAngularの巻

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

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

$(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)処理を書かなくて良いです！

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

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

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

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

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

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クラスを登録します。

<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機能を使ってる（依存してます)

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

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実行時に使用出来ます。

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反映されます！

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

<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

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 という名前で登録します

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 オブジェクトを登録します

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にも計算式が出なくなりましたね！

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

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

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/ 左の数値データを増やすメソッドを追加して..

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> ボタンクリックで数値を増やすメソッドを呼びます。

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 押しても数値が増えない…？

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

<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を呼ぶのですっきり書けますよ。

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

AngularJS入門の巻

by Toshio Ehara, 技術・開発担当 at 株式会社キャム

on May 11, 2014

Statistics

Views

Actions

2 Embeds 35

Accessibility

Categories

Upload Details

Usage Rights

Report content