• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
AngularJS入門の巻
 

AngularJS入門の巻

on

  • 1,475 views

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

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

Statistics

Views

Total Views
1,475
Views on SlideShare
1,442
Embed Views
33

Actions

Likes
7
Downloads
8
Comments
0

2 Embeds 33

https://twitter.com 32
http://blog.tsukasaya.info 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    AngularJS入門の巻 AngularJS入門の巻 Presentation Transcript

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