Angularjsでコントローラを使う

2016.6.18 (土)

変数を使う

前回は初歩の初歩をやったので今回はコントローラでscopeを使ってみます。
$scopeにいろんなものを渡してhtml上で表示することができます。

agappというのはAngularjsのモジュール名みたいなものになります。htmlの方ではタグでng-appで宣言しておきます。jsの方ではangular.moduleとして定義しておきます。
コントローラはhtmlのブロックタグにどのコントローラを使うのかを書いてゆきます。mainControllerで定義した内容がng-controller=”mainController”で定義したdiv要素内で利用することができます。
$scope.testに値を代入しているので{{test}}で出力できるという具合です。
コントローラはいっぱい書くことができるし、各ブロックで自由に使うことができます。

[myscript.js]
angular.module('agapp', [])
    .controller('mainController', ['$scope', function($scope) {
        $scope.test = 'Hello!';
    }]);
[index.html]
<!DOCTYPE html>
<html lang="ja" ng-app="agapp">
<head>
    <meta charset="UTF-8">
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
    <script src="myscript.js"></script>
</head>
<body>
    <div ng-controller="mainController">
        <p>{{test}}</p>
    </div>
</body>
</html>

demoこういう感じで後々は動的にいろんな出し方ができるというわけです。

配列とループ

配列とループもできるので便利。jQueryのeachとかよりもかなりわかりやすい。コントローラ内では、

angular.module('agapp', [])
    .controller('mainController', ['$scope', function($scope) {
        $scope.test = 'Hello!';

        $scope.lists = [
            {"name":"osamu", "sex":"man"},
            {"name":"shigeo", "sex":"man"},
            {"name":"takeo", "sex":"man"},
            {"name":"tetsuo", "sex":"man"},
            {"name":"naoko", "sex":"woman"},
        ];
    }]);

みたいな感じで$scopeにlistsをつくってあげます。JSの配列だかjsonだかっぽい感じで配列にいろいろ値を入れてやってデータを適当につくります。HTMLでは同様にコントローラを呼び出して、ng-repeatをつかってループさせます。

<div ng-controller="mainController">
    <p>{{test}}</p>
    <ul>
    <li ng-repeat="list in lists">
        {{list.name}} {{list.sex}}
    </li>
    </ul>
</div>

ng-repeatに”lists in list”してあげるところがコツです。これ英語圏の発想なので複数形と単数形ということでループさせる配列が複数形、取り出した値が単数というわけです。外国人が書いたarrayはたいてい複数形になってます。言語によっては$peopleで作成した配列から$manで取り出せたりするわけです。
これでリスト表示できます。便利だね。
demo
こういう感じで後々は動的にいろんな出し方ができるというわけです。