• Like
AngularJS入門の巻
Upcoming SlideShare
Loading in...5
×

AngularJS入門の巻

  • 6,019 views
Uploaded on

2014/5/11(日)第8回福岡市西区プログラム勉強会 …

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

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
6,019
On Slideshare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
35
Comments
0
Likes
36

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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 }} で2が表示されるはずが.. ※jQueryも使いたい為に先に読み込んでます。(AngularJSに必要ではありません)
  • 8. {{ 1+1 }} AngularJSの機能で {{ 1+1 }} で2が表示されるはずが、動いてない…
  • 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"]); 名前の箱(名前空間)は、他の箱(名前空間)を第2引数に配列で設定出来ます。 <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/ 名前の箱(名前空間)は、第2引数無しで取り出す事が出来ます。
  • 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. 4.ブラウザ(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. ! 今日はココまでです! ! 今後もテストコード、描画のチューニング、共通部品 の作り方なども発表していきたいです。 ! ご清聴ありがとうございました!