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

1. 簡単AngularJS
5/23(土)【初心者向け】関西AngularJS 勉強会 1

2. 牧 昂拡（マキ タカヒロ）
株式会社グラッドキューブ エンジニア
Webサイト解析ASP「SiTest」の開発をしています
自己紹介
2

3. 本日の内容
1.DI（依存性注入）とは？
2.Directiveとは？
3.NoJSで簡単フォームバリデーション
3

4. 1.DI（依存性注入）とは？
依存性の注入（英: Dependency injection）とは、
コンポーネント間の依存関係をプログラムのソースコード
から排除し、外部の設定ファイルなどで注入できるように
するソフトウェアパターンである（Wikipediaより）
4

5. なるほど、わからん
5

6. AngularJSではどう書くの？
(function(){
var app;
app = angular.module("MyApp");
app.controller(“HogeController",
function($scope){
$scope.initialize = function(){
console.log("hoge!");
};
}
);
}).call(this);
6

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. でもめんどくさいよね
そんなあなたに「ng-annotate」(ngmin)
npmからインストールできます
DI部分を文字列宣言しなくても
自動的に変換してくれる便利ツール
(https://github.com/olov/ng-annotate) 8

9. DIまとめ
DIは宣言したオブジェクトを
Angularが上手いこと渡してやる機能！
文字列でオブジェクトを指定する
記法を推奨！
めんどくさかったらng-annotateを使え！
9

10. 2.Directiveとは？
双方向バインディングを実現するため
のコアな機能
ModelとViewを繋ぐ役割
DOMの振る舞いを自由に作れる
CustomDirective最強
10

11. 超便利Directive
ngApp - これがないと始まらない
angular.bootstrapすれば一応なくても使える
ngBind - バインディングするなら基本はこれ
ngModel - inputで大活躍、
Viewの変更が随時Modelのオブジェクトに反映される
ngClick - クリックした時に関数実行したいならこれ
ngShow(ngHide) - 式を評価してtrueなら表示(非表示)してくれる
動的に表示したい時に便利
ngInclude - パスで指定したテンプレートを動的に読み込む
11

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. 3.NoJSで作る
簡単フォームバリデーション
HTML(Template)だけで作れます！
AngularJSを読み込むだけ！
工夫すれば確認画面まで作れる！
JSを書くともっと幅が広がる！
13

14. ご静聴ありがとうございました！
14