Angular JS 1.4系 基本的な使い方

##はじめに
AngularJS(1.4系)を使い始めて、すごいなーと思ったので(小並感)
簡単なところを共有して感動できたらいいなーと思います。
この記事はAngularJS触ったことない人・一応聞いたことあるよ
みたいな人向けの記事です。
[公式ドキュメント](https://angularjs.org)がしっかりしてるので、それ読むのがいいと思うんですが
実際に感動してもらえたら、それが一番いいと思ってるので
それを目当てに書きます。

##下準備
マイナーverが違うとここら辺が違うので注意が必要。
今回は1.4系を想定してます。

```lang:1.html
<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はというと。

```lang:js/myapp1.js
angular.module('MyApp', []).
  controller('MyAppCtrl', function() {
    var self = this;
    self.message = 'hello world';
  });
```

いきなり訳わからんすね。
１行目：Angularに'MyApp'というモジュールを作って
２行目：そのモジュールはコントローラーなんだよ。
３行目以下：
そのコントローラーオブジェクトのmessageっていうのは、'hello world'さ！

っていう感じ。まずは進みます。

そんなわけで、一旦サンプルを見ましょう
[サンプルページ](http://nbtacksaito.github.io/angular-memo/1.html)

1.htmlの{{app.message}}の部分がhello worldになりました。

htmlのほうを解説していきます。

```1.html
<html ng-app="MyApp">
```
これはMyAppていうモジュール使いますっていう定義。おまじない。

```1.html
  <div ng-controller="MyAppCtrl as app">
    <h2>app.Message : {{app.message}}</h2>
  </div>
```
ここのdiv要素内で'MyAppCtrl'というコントローラを、appという名前で使いますと宣言。
'{{}}'は中のものを表示するって感じです。

これでもうAngularJSが完全に使えます。いきましょーー！


#ng-model

まずはサンプルをば。
[サンプル](http://nbtacksaito.github.io/angular-memo/2.html)


僕はこの時点ですでに感動しました。素のJSで書けって言われたら、ちょっともうしんどいです。
ソースを見てみましょう。

```myapp2.js
angular.module('MyApp', []).
  controller('MyAppCtrl', function() {
    var self = this;
    self.user_input = '';
  });
```
user_input を空文字で用意しておきます。(用意しなくても動く)
(user_inputっていう名前使ってるからね！っていう自分へのメモも込めて書いてます)

```lang:2.html
<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に値を入れてくれます。

```lang:2.html
    you input : {{app.user_input}}
```
なので、ここの{{app.user_input}}に値が入るわけです。

jsとviewを繋いでます。すごいっすね。


#ng-show, ng-hide
ng-show:ある値が真なら表示　、偽なら非表示
ng-hide:ある値が真なら非表示、偽なら表示
っていう想像通りのものです。

これはあんまり感動しないかもですが...
[サンプル](http://nbtacksaito.github.io/angular-memo/3.html)


```3.html
<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>
```

これでは使いどころ無さすぎですが
もちろんコントローラの値によって出しわけができます。

```myapp3.js
angular.module('MyApp', []).
  controller('MyAppCtrl', function() {
    var self = this;
    self.show_1 = true;
    self.show_2 = false;
    self.obj = {};
  });
```
```3.html
  <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>
```
```3.html
<p ng-show="app.obj">objectあるよ</p>
<p ng-show="app.show_2 ? false: true">3項演算子</p>
```
っていうようなことも可能。
3項演算子は悪だ！なんて思ってた時期もありましたが、結構使ってます。


#ng-click
素のjsでいうonclick属性ですね。
onclickとは何が違うのかは、またいつか。

[サンプル](http://nbtacksaito.github.io/angular-memo/4.html)

```4.html
<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が発火します。
で、それは何かって言うと

```myapp4.js
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の付け替えしちゃいます。
[サンプル](http://nbtacksaito.github.io/angular-memo/5.html)

クリックすると色が変わります。

```5.html
  <style>
    .red {
      color: red;
    }
    .blue {
      color: blue;
    }
  </style>
```
redクラスとblueクラスを定義

```5.hml
<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}"
```
こういうことが出来そうですよね。

さて、色変えちゃいますボタンは何をしているかというと

```myapp5.js
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の真偽値を入れ替えてるだけですね。
上段の赤文字が赤-黒で変化するのは

```5.html
<p ng-class="{'red': app.color.is_red}">赤文字</p>
```
is_redが真の時だけredのクラスを付与するが、偽の時は何もしないので
もともとのデフォルトの色の黒になります。

どうですか？僕は感動しました。


#ng-src
```
<img src="jsの値入れたい">
```
ここにもjsの値を入れたいとかありますよね。そんな時にng-src

[サンプル](http://nbtacksaito.github.io/angular-memo/6.html)

```5.html
<div ng-controller="MyAppCtrl as app">
  <img ng-src="{{app.image_path}}">
</div>
```
で、jsにimage_pathが書いてあって

```myapp6.js
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にデータバインディングする感じです。わけわからんすね。
[サンプル](http://nbtacksaito.github.io/angular-memo/7.html)

```7.html
<div ng-controller="MyAppCtrl as app">
  <p ng-bind="app.bind_message"></p>
</div>
```

```myapp7.js
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はそういう時にいいです。
[サンプル](http://nbtacksaito.github.io/angular-memo/8.html)

```myapp8.js
    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上で表示させたい時に

```8.html
  <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すごくイイです :laughing: