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