More Related Content
Similar to 簡単AngularJS(関西AngularJS勉強会)
Similar to 簡単AngularJS(関西AngularJS勉強会) (20)
More from Takahiro Maki (6)
簡単AngularJS(関西AngularJS勉強会)
- 7. JSを難読化する場合は?
(function(){
var app;
app = angular.module("MyApp");
app.controller("FugaController", [“$scope",
function($scope){
$scope.initialize = function(){
console.log("fuga!");
};
}
]);
}).call(this);
7
- 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
Editor's Notes
- 牧昂拡と申します
株式会社グラッドキューブでエンジニアやっていて
Webサイト解析ASP「SiTest」の開発をしています
そのSiTestではAngularJSを採用しています
- 本日の内容としては3点
DIとは?
Directiveとは?
JSを使わずにフォームバリデーション作れますよ
の3本立てです
- まずDIとは
- なるほど、よくわからんとなるわけです
じゃあ、AngularJSではどうなってるのか
- こんな感じに書きます
コントローラのコールバックで$scopeという引数をとっているわけですが、
これをAngularが上手く解釈して$socpeオブジェクトをいれてくれるわけです
すごいよね、Angular
ただしこの書き方には欠点があって、JSを難読化するとダメになる
じゃあどうすればいいか
- このように文字列として定義してやればいいわけです
文字列は難読化しても変わらないので、それを利用して
DIの宣言をしているわけです
- ただ、ネイティブでこんなクソ長いコード書いてたら
いやになってきますよね?
そんなあなたにngminというnpmパッケージ
DI部分を文字列宣言しなくても自動的に変換してくれます
- DIのまとめです
- 2つ目、Directiveとはなにか
Angularの売りでもある双方向バインディングを実現するためのコアな機能
ModelとViewをつなぐ役割をしています
また、CustomDirectiveを定義してDOMの振る舞いを自由に作れます
CustomDirective最強
- Angularが最初から用意してくれているDirectiveの中で
便利そうなやつを紹介します
- CusotmDirectiveを作る場合はこのように作成します
- 3つ目、JS無しで簡単フォームバリデーションが作れます!
用意するのはHTMLだけ
Angularは読み込みましょう
頑張れば確認画面も作れちゃいます
JSを書くと更に幅が広がります