簡単AngularJS（関西AngularJS勉強会）

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

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

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

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

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

JSを難読化する場合は？
(function(){
var app;
app.controller("FugaController", [“$scope",
function($scope){
$scope.initialize = function(){
console.log("fuga!");
};
}
]);
}).call(this);
7

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

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

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

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

// CustomDirective
(function(){
var app;
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

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

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

簡単AngularJS（関西AngularJS勉強会）

More Related Content

What's hot (20)

Similar to 簡単AngularJS（関西AngularJS勉強会） (20)

More from Takahiro Maki (6)

簡単AngularJS（関西AngularJS勉強会）

Editor's Notes