AngularJS 基本〜AngularJSを理解する2〜

今回は、AngularJSてテンプレートを使用してみようと思います。
AngularJSでの主要な機能?としては以下のものがあります。作成したものはこちらで触れます

  1. APPモジュール(ルートになるモジュール)
  2. コントローラー(app.controller(XXXX, function { XXX }))
  3. テンプレート(今回学習します)

テンプレート?

「あー、歯の矯正に使用するやつ?」と思った方、残念ながら知能レベルが自分と同じくらいです。。。

テンプレートとはHTMLに記述しているコードのことの様です。
下に作成したコードを記載します。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
        <script type="text/javascript">
            // appモジュールを作成する
            var app = angular.module("Hello", []);
            // コントローラーを登録する
            app.controller("HelloCtrl", function($scope) {
                // コントローラー処理
                $scope.hello = {
                    text: "Hello",
                    value: 1234
                };
                $scope.test = function() {
                    alert("test");
                };
            });
        </script>
    </head>
    <body ng-app="Hello">
        <!-- テンプレート部分 -->
        <div ng-controller="HelloCtrl">
            <p>{{hello.text}}, World!!</p>
            <button ng-click="test()">test</button>
        </div>
    </body>
</html>

一応までに、処理内容をまとめておきます。

  1. var app = XXXXと実装している部分に関してはAPPモジュールを作成しています。そして、HTML(テンプレート側)にはng-app="Hello"の様にAPPモジュールを指定しています。
  2. app.controller("コントローラー名", function(){ / コントローラーの処理 / });の様な形でコントローラーを実装します。
    3。HTML側(テンプレート側)で値を表示します。{{hello.text}}"{{}}"の中身にコードが書ける仕様になっています。

「ng-XXX」

HTML側のテンプレートには「ng-XXX」の様にいろんな属性をつけることができます。上のコードで使用しているのはng-clickです、このほかにも沢山あるので機会があれば調べてみようと思います。

次回はモデル

次回は、モデル(Model)についてやろうと思います。このモデルは、データを格納するもので入力した文字をモデルとバインド(関連付ける)ことにより、テキストボックスと表示する項目が同じものになります。
そういうサンプルが、W3のチュートリアルページにありますので見てみるのも一興です。

でわでわ。。。