AngularJSに挑戦！入門 その２

#はじめに
少しずつですが、AngularJSについてわかってきました。
まぁほんとにすこしですが。。。
今回からは、Javascriptが登場します。
[前回の記事](http://qiita.com/village/items/adc65702281536083c8a)では、HTMLだけでした。本来の形に少しずつ慣れていきましょう！

#コントローラーを使う
angularJSでは、MVCの形式をとります。
M(Model)とV(View)そしてC(Controller)になります。
前回は、Viewを使用しました。今回は、Controllerを使用します。
Controllerは可能な限り、スリムなコードを目指すべきです。
View（HTML）やModel(値などを格納）でできないことのみを記述しましょう。

#実際に作ってみる
まず、配列にある文字列を順番に表示するアプリケーションを作ります。
とても簡単なものです。`ng-repeat`タグを使用するためのサンプルになります。
たぶん、よく使う機能になると思うので。

```Sample02.js
var MyApp = angular.module('MyApp', []);
MyApp.controller('TestCtrl', ['$scope', function ($scope) {
    $scope.animals = ["dog", "cat", "monkey", "elephant", "Lion", "giraffe"];
}]);
```

`var MyApp = angular.module(<アプリケーション名>, []);`は、AngularJSアプリケーションの作成です。
`MyApp.controller(<コントローラー名>, ['$scope', function ($scope) {`は、コントローラーの設定です。
`$scope.animals = ...`で`$scope`に`animals=変数を追加します。
準備はこれでOKです。
では、表示をするHTMLファイルを作成しましょう。

```lang:Sample02.html
<html>
<head>
    <meta charset="utf-8">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
    <script type="text/javascript" src="Sample02.js"></script>
    <title>Repeat!</title>
</head>
<body ng-app="MyApp">
    <div class="container">
        <div class="bg-success" ng-controller="TestCtrl">
            <div ng-repeat="animal in animals">
                <p>{{animal}}</p>
            </div>
        </div>
    </div>
</body>
</html>
```
`<body ng-app="MyApp">`　[先日書いた記事](http://qiita.com/village/items/adc65702281536083c8a)では、
匿名のアプリケーションの設定でしたが、今回はJavascriptを使用しているので、Javascriptで設定した"MyApp"を指定します。
`<div class="bg-success" ng-controller="TestCtrl">`使用するコントローラーを設定します。
`<div ng-repeat="<変数名> in <配列名>">`で、繰り返し処理を行います。
`div`タグで括っている間の内容が配列数繰り返されます。

#せっかくなので、いろいろな表示を行う
ViewとなるHTMLファイルに手を加えます。

```lang:Sample03.html
<html>
<head>
    <meta charset="utf-8">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
    <script type="text/javascript" src="Sample02.js"></script>
    <title>Repeat2!</title>
</head>
<body ng-app="MyApp">
    <div class="container">
        <div ng-controller="TestCtrl">
            <div class="bg-success">
                <h2>ノーマル</h2>
                <div ng-repeat="animal in animals">
                    <p>{{animal}}</p>
                </div>
            </div>

            <div class="bg-info">
                <h2>ノーマル（インデックス付き）</h2>
                <div ng-repeat="animal in animals">
                    <p>{{$index}} : {{animal}}</p>
                </div>
            </div>

            <div class="bg-primary">
                <h2>配列の最初だけ表示</h2>
                <div ng-repeat="animal in animals">
                    <span ng-show="$first">{{$index}} : {{animal}}</span>
                </div>
            </div>

            <div class="bg-warning">
                <h2>配列の真ん中だけ表示</h2>
                <div ng-repeat="animal in animals">
                    <span ng-show="$middle">{{$index}} : {{animal}}</span>
                </div>
            </div>

            <div class="bg-danger">
                <h2>配列の最後だけ表示</h2>
                <div ng-repeat="animal in animals">
                    <span ng-show="$last">{{$index}} : {{animal}}</span>
                </div>
            </div>

            <div class="bg-primary">
                <h2>配列の偶数だけ表示</h2>
                <div ng-repeat="animal in animals">
                    <span ng-show="$even">{{$index}} : {{animal}}</span>
                </div>
            </div>

            <div class="bg-success">
                <h2>配列の奇数だけ表示</h2>
                <div ng-repeat="animal in animals">
                    <span ng-show="$odd">{{$index}} : {{animal}}</span>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
```

{{$index}}は、配列のインデックスを表示してくれます。0からです。
`ng-show`属性は、表示に関する設定を行うことができます。
特殊な変数を指定すると配列の表示する内容が変わります。
以下は、設定できる特殊な変数です。

```
$first:  配列の先頭を取得する
$middle: 配列の先頭と最後を除いた値を取得する
$last:   配列の最後を取得する
$even:   配列のインデックスが偶数の値を取得する
$odd:    配列のインデックスが奇数の値を取得する
```

#ng-showの使い方その２
```lang:Sample04.html
<html>
<head>
    <meta charset="utf-8">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
    <script type="text/javascript" src="Sample02.js"></script>
    <title>Check!</title>
</head>
<body ng-app="MyApp">
    <div class="container">
        <div ng-controller="TestCtrl">
            <div class="bg-primary">
            <input type="checkbox" ng-model="checked">チェックしたら表示</input>
                <div ng-repeat="animal in animals">
                    <span ng-show="checked">{{$index}} : {{animal}}</span>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
```

`ng-show`属性は、true or falseの値が本来の値になります。
上記の例では、`ng-model`に連動して、表示されたりされなかったりします。

#おわりに
まだ、Viewを作ることがメインになっていますが、少しずつcontrollerも
充実させたアプリケーションを作っていきたいと思います。