Help us understand the problem. What is going on with this article?

AngularJSに挑戦!入門 その2

More than 5 years have passed since last update.

はじめに

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

village
気が付いたら、フリーランスのエンジニアになりました。 PHP + Laravel + Vue.js + Node.js = 今の仕事 python + 機械学習 = 勉強中
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away