今回は、AngularJSてテンプレートを使用してみようと思います。
AngularJSでの主要な機能？としては以下のものがあります。作成したものはこちらで触れます。
- APPモジュール(ルートになるモジュール)
- コントローラー(
app.controller(XXXX, function { XXX })) - テンプレート(今回学習します)
テンプレート？
「あー、歯の矯正に使用するやつ？」と思った方、残念ながら知能レベルが自分と同じくらいです。。。
テンプレートとは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>
一応までに、処理内容をまとめておきます。
var app = XXXXと実装している部分に関してはAPPモジュールを作成しています。そして、HTML（テンプレート側)にはng-app="Hello"の様にAPPモジュールを指定しています。app.controller("コントローラー名", function(){ / コントローラーの処理 / });の様な形でコントローラーを実装します。
３。HTML側(テンプレート側)で値を表示します。{{hello.text}}"{{}}"の中身にコードが書ける仕様になっています。
「ng-XXX」
HTML側のテンプレートには「ng-XXX」の様にいろんな属性をつけることができます。上のコードで使用しているのはng-clickです、このほかにも沢山あるので機会があれば調べてみようと思います。
次回はモデル
次回は、モデル(Model)についてやろうと思います。このモデルは、データを格納するもので入力した文字をモデルとバインド(関連付ける)ことにより、テキストボックスと表示する項目が同じものになります。
そういうサンプルが、W3のチュートリアルページにありますので見てみるのも一興です。
でわでわ。。。
