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(関西AngularJS勉強会)

723 views

Published on

関西AngularJS勉強会での資料です

Published in: Engineering
  • Be the first to comment

簡単AngularJS(関西AngularJS勉強会)

  1. 1. 簡単AngularJS 5/23(土)【初心者向け】関西AngularJS 勉強会 1
  2. 2. 牧 昂拡(マキ タカヒロ) 株式会社グラッドキューブ エンジニア Webサイト解析ASP「SiTest」の開発をしています 自己紹介 2
  3. 3. 本日の内容 1.DI(依存性注入)とは? 2.Directiveとは? 3.NoJSで簡単フォームバリデーション 3
  4. 4. 1.DI(依存性注入)とは? 依存性の注入(英: Dependency injection)とは、 コンポーネント間の依存関係をプログラムのソースコード から排除し、外部の設定ファイルなどで注入できるように するソフトウェアパターンである(Wikipediaより) 4
  5. 5. なるほど、わからん 5
  6. 6. AngularJSではどう書くの? (function(){ var app; app = angular.module("MyApp"); app.controller(“HogeController", function($scope){ $scope.initialize = function(){ console.log("hoge!"); }; } ); }).call(this); 6
  7. 7. JSを難読化する場合は? (function(){ var app; app = angular.module("MyApp"); app.controller("FugaController", [“$scope", function($scope){ $scope.initialize = function(){ console.log("fuga!"); }; } ]); }).call(this); 7
  8. 8. でもめんどくさいよね そんなあなたに「ng-annotate」(ngmin) npmからインストールできます DI部分を文字列宣言しなくても 自動的に変換してくれる便利ツール (https://github.com/olov/ng-annotate) 8
  9. 9. DIまとめ DIは宣言したオブジェクトを Angularが上手いこと渡してやる機能! 文字列でオブジェクトを指定する 記法を推奨! めんどくさかったらng-annotateを使え! 9
  10. 10. 2.Directiveとは? 双方向バインディングを実現するため のコアな機能 ModelとViewを繋ぐ役割 DOMの振る舞いを自由に作れる CustomDirective最強 10
  11. 11. 超便利Directive ngApp - これがないと始まらない angular.bootstrapすれば一応なくても使える ngBind - バインディングするなら基本はこれ ngModel - inputで大活躍、 Viewの変更が随時Modelのオブジェクトに反映される ngClick - クリックした時に関数実行したいならこれ ngShow(ngHide) - 式を評価してtrueなら表示(非表示)してくれる 動的に表示したい時に便利 ngInclude - パスで指定したテンプレートを動的に読み込む 11
  12. 12. // CustomDirective (function(){ var app; app = angular.module("MyApp"); app.directive("binding", [function(){ return { restrict: "C", scope: true, template: "<span>{{obj()}}</span>", controller: ["$scope", "$element", “$attrs", function($scope, $element, $attrs){ $scope.obj = function(){ return "Hoge!"; }; } ] }; }]); }).call(this); 12
  13. 13. 3.NoJSで作る 簡単フォームバリデーション HTML(Template)だけで作れます! AngularJSを読み込むだけ! 工夫すれば確認画面まで作れる! JSを書くともっと幅が広がる! 13
  14. 14. ご静聴ありがとうございました! 14

×