##はじめに
AngularJS(1.4系)を使い始めて、すごいなーと思ったので(小並感)
簡単なところを共有して感動できたらいいなーと思います。
この記事はAngularJS触ったことない人・一応聞いたことあるよ
みたいな人向けの記事です。
公式ドキュメントがしっかりしてるので、それ読むのがいいと思うんですが
実際に感動してもらえたら、それが一番いいと思ってるので
それを目当てに書きます。
##下準備
マイナーverが違うとここら辺が違うので注意が必要。
今回は1.4系を想定してます。
<html ng-app="MyApp"><!--このタグの中でangularJS使うよっていう感じ -->
<head>
<meta charset="utf-8"><!--いつも通りの文字コード -->
<script src="js/lib/angular.min.js"></script><!--Angular使うよ-->
<script src="js/myapp1.js"></script><!-- JSのソース -->
</head>
<body>
<div ng-controller="MyAppCtrl as app">
<h2>app.message : {{app.message}}</h2>
</div>
</body>
</html>
AngularJSのソースを落としてないなら↓
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
でももちろん可。
で、自分の作るJSはというと。
angular.module('MyApp', []).
controller('MyAppCtrl', function() {
var self = this;
self.message = 'hello world';
});
いきなり訳わからんすね。
１行目：Angularに'MyApp'というモジュールを作って
２行目：そのモジュールはコントローラーなんだよ。
３行目以下：
そのコントローラーオブジェクトのmessageっていうのは、'hello world'さ！
っていう感じ。まずは進みます。
そんなわけで、一旦サンプルを見ましょう
サンプルページ
1.htmlの{{app.message}}の部分がhello worldになりました。
htmlのほうを解説していきます。
<html ng-app="MyApp">
これはMyAppていうモジュール使いますっていう定義。おまじない。
<div ng-controller="MyAppCtrl as app">
<h2>app.Message : {{app.message}}</h2>
</div>
ここのdiv要素内で'MyAppCtrl'というコントローラを、appという名前で使いますと宣言。
'{{}}'は中のものを表示するって感じです。
これでもうAngularJSが完全に使えます。いきましょーー！
#ng-model
まずはサンプルをば。
サンプル
僕はこの時点ですでに感動しました。素のJSで書けって言われたら、ちょっともうしんどいです。
ソースを見てみましょう。
angular.module('MyApp', []).
controller('MyAppCtrl', function() {
var self = this;
self.user_input = '';
});
user_input を空文字で用意しておきます。(用意しなくても動く)
(user_inputっていう名前使ってるからね！っていう自分へのメモも込めて書いてます)
<body>
<div ng-controller="MyAppCtrl as app">
<input type="text" ng-model="app.user_input"><br>
you input : {{app.user_input}}
</div>
</body>
ここのinputの要素にng-modelが、jsとviewを繋いでいます。
input要素に入力された文字はapp.user_input
つまり、MyAppCtrl.user_inputに値を入れてくれます。
you input : {{app.user_input}}
なので、ここの{{app.user_input}}に値が入るわけです。
jsとviewを繋いでます。すごいっすね。
#ng-show, ng-hide
ng-show:ある値が真なら表示 、偽なら非表示
ng-hide:ある値が真なら非表示、偽なら表示
っていう想像通りのものです。
これはあんまり感動しないかもですが...
サンプル
<div ng-controller="MyAppCtrl as app">
<p ng-show="true">見える</p>
<p ng-show="false">見えない</p>
<p ng-hide="true">見えない</p>
<p ng-hide="false">見える</p>
</div>
これでは使いどころ無さすぎですが
もちろんコントローラの値によって出しわけができます。
angular.module('MyApp', []).
controller('MyAppCtrl', function() {
var self = this;
self.show_1 = true;
self.show_2 = false;
self.obj = {};
});
<table border="1">
<tr>
<td></td>
<td>真</td>
<td>偽</td>
</tr>
<tr>
<td>ng-show</td>
<td><span ng-show="app.show_1">○</span></td>
<td><span ng-show="app.show_2">×</span></td>
</tr>
<tr>
<td>ng-hide</td>
<td><span ng-hide="app.show_1">×</span></td>
<td><span ng-hide="app.show_2">○</span></td>
</tr>
</table>
<p ng-show="app.obj">objectあるよ</p>
<p ng-show="app.show_2 ? false: true">3項演算子</p>
っていうようなことも可能。
3項演算子は悪だ！なんて思ってた時期もありましたが、結構使ってます。
#ng-click
素のjsでいうonclick属性ですね。
onclickとは何が違うのかは、またいつか。
<div ng-controller="MyAppCtrl as app">
<button ng-click="app.click_func()">Click Me</button>
<p ng-show="app.after_click">Clickしました</p>
</div>
Click Meボタンを押すとMyAppCtrl.click_funcが発火します。
で、それは何かって言うと
angular.module('MyApp', []).
controller('MyAppCtrl', function() {
var self = this;
self.after_click = false;
self.click_func = function() {
alert('クリック');
self.after_click = true;
};
});
クリックとアラートを出して、after_clickをtrueにしています。
それでalertをOKしたときに'Clickしました'が表示されるようになります。
ng-showが生きてきました。
僕はこんなんでも感動しました。
#ng-class
表示非表示だけじゃなくて、色変えたり、もうちょい何かないの？
っていうのがこれ。
classの付け替えしちゃいます。
サンプル
クリックすると色が変わります。
<style>
.red {
color: red;
}
.blue {
color: blue;
}
</style>
redクラスとblueクラスを定義
<div ng-controller="MyAppCtrl as app">
<p ng-class="{'red': app.color.is_red}">赤文字</p>
<button ng-click="app.change_color()">色変えちゃいます！</button>
<p ng-class="{'red': app.color.is_red, 'blue': app.color.is_blue}">Sample Text 1234 5678</p>
</div>
ng-classの書き方は
ng-class="{'付与するクラス名': 判定式・値}"
もう見るからに
"{'red': app.color.is_red, 'blue': app.color.is_blue}"
こういうことが出来そうですよね。
さて、色変えちゃいますボタンは何をしているかというと
angular.module('MyApp', []).
controller('MyAppCtrl', function() {
var self = this;
self.color = {
is_red : true,
is_blue: false
};
self.change_color = function () {
self.color.is_red = !self.color.is_red;
self.color.is_blue = !self.color.is_blue;
};
});
is_redとis_blueの真偽値を入れ替えてるだけですね。
上段の赤文字が赤-黒で変化するのは
<p ng-class="{'red': app.color.is_red}">赤文字</p>
is_redが真の時だけredのクラスを付与するが、偽の時は何もしないので
もともとのデフォルトの色の黒になります。
どうですか？僕は感動しました。
#ng-src
<img src="jsの値入れたい">
ここにもjsの値を入れたいとかありますよね。そんな時にng-src
<div ng-controller="MyAppCtrl as app">
<img ng-src="{{app.image_path}}">
</div>
で、jsにimage_pathが書いてあって
angular.module('MyApp', []).
controller('MyAppCtrl', function() {
var self = this;
self.image_path = 'images/block.png';
});
って感じ。
ng-src使わないでそのまま突っ込む形(以下)は
<div ng-controller="MyAppCtrl as app">
<img src="./{{imagePath}}" />
</div>
データバインディング前に( {{ }}に値を入れ込む前に)読み込まれてしまう(?)のか
404エラーが出たりするので、ダメパターン。
詳しくは公式に載ってるんじゃないかな(未調査)
#ng-bind
ng-bindは値をviewにデータバインディングする感じです。わけわからんすね。
サンプル
<div ng-controller="MyAppCtrl as app">
<p ng-bind="app.bind_message"></p>
</div>
angular.module('MyApp', []).
controller('MyAppCtrl', function() {
var self = this;
self.bind_message = 'sample text';
});
{{ }}
とほとんど同じです。
{{ }}で表示すると、一瞬'{{ }}'が見えてしまう問題があるのですが
ng-bind使えば問題ないよ！っていうこと(らしいです。)
また、
<p ng-bind="app.bind_message + '(サンプルテキストです)'"></p>
bindしながら、文字を足すことができます。地味に使えます。
#ng-repeat
Ajaxで通信してデータ取得するのはいいんですが、それって何個か決まってないってこと
あると思います。
ng-repeatはそういう時にいいです。
サンプル
self.obj.users[0].name = 'tack';
self.obj.users[0].age = '23';
self.obj.users[1].name = 'johnny';
self.obj.users[1].age = '27';
self.obj.users[2].name = 'tanaka';
self.obj.users[2].age = '60';
self.obj.users[3].name = 'takahashi';
self.obj.users[3].age = '43';
self.obj.users[4].name = 'uchida';
self.obj.users[4].age = '13';
self.obj.users[5].name = 'saitoh';
self.obj.users[5].age = '37';
こういうデータを用意しておきます(Ajax通信などでデータを取得したとします)
(サンプルでconsole.logでデータを出してます)
これをview上で表示させたい時に
<div ng-repeat="(key,val) in app.obj.users">
<ul>
<li>
key=<span ng-bind="key"></span>:
name=<span ng-bind="val.name"></span>,
age=<span ng-bind="val.age"></span>
</li>
</ul>
</div>
これでサンプルのように表示されます。
<div ng-repeat="(key,val) in app.obj.users">
ここで、app.obj.usersをクルクル回すよ！
( { key : val } の形で受け取りつつ)
っていう感じですね。
valにはnameとageが入ってるので
name=<span ng-bind="val.name"></span>,
age=<span ng-bind="val.age"></span>
みたいにアクセスして値を取得できます。
便利ー。
ng-repeatは他にも色々できて、奥が深いんですが、一旦コレだけ。
(まだ自分が理解しきってない)
#おわりに
どーでしょう？
素のJSでもjqueryでも書けるけど
あとで見た時により分かりやすく、より明示的な感じ。
ソースも短くて済む。
なにこれすごいじゃん。革命じゃん。
Angularすごくイイです 