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.

AngularJS入門の巻

12,441 views

Published on

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

  • Sex in your area is here: ♥♥♥ http://bit.ly/39pMlLF ♥♥♥
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Follow the link, new dating source: ❶❶❶ http://bit.ly/39pMlLF ❶❶❶
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

AngularJS入門の巻

  1. 1. 2014/5/11(日) 第8回福岡市西区プログラム勉強会 AngularJS入門の巻 Photo by Web制作向け無料写真素材/ぱくたそ http://www.pakutaso.com
  2. 2. -自己紹介- 株式会社キャムの江原と申します。 プログラマしてます。 twitter : @itokami1123 企業の経営戦略に役立つサービス「CAM MACS」を AWSにて提供してます。
  3. 3. 今日はAngularJS知識を整理するため 自分なりに理解した事をなるべく分かり易く説明します。 変なとこ、意味が分かんないとこがあったら ツッコミをお願いしますね。 (@itokami1123まで)
  4. 4. 2014/5/11(日) 第8回福岡市西区プログラム勉強会 AngularJS入門 ご注意! オレオレ(独りよがり)な所も多々ございます。 ちゃんとした情報は公式サイトや書籍等をご覧ください。 ! ! ! ! ! ! ! ! ! ! 公式サイト: https://angularjs.org/ AngularJSアプリケーション開発ガイド [大型本]
  5. 5. - 今日の内容 - 1. 立ち上がれAngularの巻 2. moduleは俺のロッカーの巻 3. 依存してしまおうの巻 4. ブラウザ(DOM)に値を表示の巻 5. データ管理はサービスよの巻 6. データの反映は何時?の巻
  6. 6. 1.立ち上がれAngularの巻
  7. 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. 8. {{ 1+1 }} AngularJSの機能で {{ 1+1 }} で2が表示されるはずが、動いてない…
  9. 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. 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. 11. 2.moduleは俺のロッカーの巻
  12. 12. angular.module("app",[]); appという名前の箱(名前空間)を作る事が出来ます! <div ng-app="app" > {{ 1+1 }} </div> ng-appで指定した箱(名前空間)を使います。 http://jsfiddle.net/itokami1123dev/8L2aR/1/
  13. 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. 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. 15. 3.依存してしまおうの巻
  16. 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. 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. 18. 4.ブラウザ(DOM)に値を表示の巻
  19. 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. 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. 21. 5.データ管理はサービスよの巻
  22. 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. 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. 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. 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. 26. 6.データの反映は何時?の巻
  27. 27. ところで$scopeのプロパティは いつ画面に反映するの??
  28. 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. 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. 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. 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. 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. 33. ! 今日はココまでです! ! 今後もテストコード、描画のチューニング、共通部品 の作り方なども発表していきたいです。 ! ご清聴ありがとうございました!

×