はじめに

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

下準備

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

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はというと。

js/myapp1.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のほうを解説していきます。

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

まずはサンプルをば。
サンプル

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

myapp2.js

angular.module('MyApp', []).
  controller('MyAppCtrl', function() {
    var self = this;
    self.user_input = '';
  });

user_input を空文字で用意しておきます。(用意しなくても動く)
(user_inputっていう名前使ってるからね！っていう自分へのメモも込めて書いてます)

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に値を入れてくれます。

2.html

    you input : {{app.user_input}}

なので、ここの{{app.user_input}}に値が入るわけです。

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

ng-show, ng-hide

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

これはあんまり感動しないかもですが...
サンプル

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とは何が違うのかは、またいつか。

サンプル

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の付け替えしちゃいます。
サンプル

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

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

サンプル

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にデータバインディングする感じです。わけわからんすね。
サンプル

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はそういう時にいいです。
サンプル

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すごくイイです