Saba note

醜悪コード Ugly hacks ITものづくり

AngularJSでコントローラを使う

さて前回では初歩的なAngularJSを使ってみましたが、今度はコントローラを使います。コードがものすごく複雑になってきたときにhtmlファイルにコードを書くのはナンセンスなのでコントローラに分けてあげます。

<head>
    <meta charset="utf-8">
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script>
    <script src="controller_001.js"></script> ←こんな感じでよびだす
</head>

コントローラを使ってみる Hello World!

コントローラの中身は以下のようにします。モジュールの引数にはhtmlタグで指定したアプリケーション名を、コントローラの引数は任意のもので構わないのですが、この引数はhtmlの中でコントローラを有効にする場所(ブロック)に指定してあげます。

[controller_001.js]
angular.module('aglrapp', [])
    .controller('Test', ['$scope', function($scope) {
        $scope.test = 'Hello! AngularJS';
    }]);

HTMLはこんな感じ

<html lang="ja" ng-app="aglrapp">
<head>
    <meta charset="utf-8">
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script>
    <script src="controller_001.js"></script>
</head>
<body ng-controller="Test">
    <div>
    {{test}}
    </div>
</body>
</html>

Sample

モジュールという概念

すごく若いころにPerlをやっていたのでその頃にはモジュールというものがよく出てきました。モジュール、プラグイン、ライブラリー、パッケージ、関数、依存注入と似たような概念がいっぱいあって、また言語によって微妙に呼び方と概念が違っていてかなり混乱しますが、モジュールは比較的大きな意味での役割の切り分けという役目を果たします。
プログラミングの言語は普通に書いてしまうとすべてGlobalのスコープになってしまうのが常です。ですがAngularJSでは可能な限りそれを避け、モジュールという仕組みで機能の切り分けをしようと言うものです。使っているとわかるのですが、AngularJSのモジュールは「アプリ(アプリケーション)」ということでもいいんじゃないかと思うときがあります。モジュールという大きな入れ物にそれぞれのコントローラを設定したり、ルーティングを設定したり、ディレクティブを設定したりするわけです。こればかりは使い込んでみないとわからないといったところもあるのですが。。
ただ書籍などでは、「モジュールは、アプリを構成するコンポーネント部分の入れ物」という言い方をしている場合があります。

コントローラで配列を定義する

[controller_002.js]
angular.module('aglrapp', [])
    .controller('Test', ['$scope', function($scope) {
        // 配列
        $scope.tests = [
            {"language":"PHP", "memo":"馬鹿"},
            {"language":"Javasctript", "memo":"変態"},
            {"language":"Ruby", "memo":"エリート"},
            {"language":"C", "memo":"他人"},
            {"language":"Go", "memo":"外人"},
        ];
    }]);

HTMLはこんな感じ

<html lang="ja" ng-app="aglrapp">
<head>
    <meta charset="utf-8">
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script>
    <script src="controller_002.js"></script>
</head>
<body ng-controller="Test">
    <div>
    {{tests}}
    </div>
</body>
</html>

Sample
こんな感じで配列を出力できますが、これはあまりにも不格好で使いようがないので、ng-repeatなるもので配列をループして出力することができます。これは次回。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です