LoginSignup
8

More than 5 years have passed since last update.

AngularJSに挑戦!入門 その2

Last updated at Posted at 2014-11-03

はじめに

少しずつですが、AngularJSについてわかってきました。
まぁほんとにすこしですが。。。
今回からは、Javascriptが登場します。
前回の記事では、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ファイルを作成しましょう。

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"> 先日書いた記事では、
匿名のアプリケーションの設定でしたが、今回はJavascriptを使用しているので、Javascriptで設定した"MyApp"を指定します。
<div class="bg-success" ng-controller="TestCtrl">使用するコントローラーを設定します。
<div ng-repeat="<変数名> in <配列名>">で、繰り返し処理を行います。
divタグで括っている間の内容が配列数繰り返されます。

せっかくなので、いろいろな表示を行う

ViewとなるHTMLファイルに手を加えます。

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の使い方その2

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も
充実させたアプリケーションを作っていきたいと思います。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8