今回はAngularモジュールの扱いを学習します。
参考ページはこちらです。
前回までに、おぼろげながら理解できた「モジュール」について学習します。
モジュール
早い話がvar app = angular.module('myApp', []);の部分です。
これを変数に取り出しているので「app」j変数を操作することがモジュールの操作になります。
今までは下の様にとりあえずでコントローラーを追加していました。
app.controller('myCtrl', function($scope) {このコントローラーで使用する変数などを画面のHTML部分とバインドして表示・非表示をコントロールできます。
ディレクティブ
今まではng-XXXの部分のみをさしていましたが、今回からは下の様なものもディレクティブと呼びます。というかこちらが正しいのかも？
<ディレクティブ名></ディレクティブ名>
実装の仕方としては以下の様になります。
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
<br/>
<h3>ディレクティブ</h3>
<w3-test-directive></w3-test-directive>
</div>
<script>
// モジュール
var app = angular.module('myApp', []);
// コントローラー
app.controller('myCtrl', function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
});
// ディレクティブ
app.directive("w3TestDirective", function() {
return {
template : "I was made in a directive constructor!"
}
});
</script>
</body>
</html>
こんな感じで、HTMLに外部のHTMLを読み込むことができます。このtemplate: XXXXで指定して入る部分に、HTMLファイルを指定することもできます。
ただし、HTMLファイルを指定するときはtemplateUrl: を使用する様です。
まとめると以下の様になります。
// ディレクティブ
app.directive("w3TestDirective", function() {
return {
// template : "<h1>Hello World</h1>" -> html記述
restrict: 'E',
templateUrl: './tutorial1.html' // htmlファイル指定
}
});
実行結果
チュートリアルの初めの方にやったものをディレクティブとして読み込んでいます。
今回は、この辺りで失礼します。
でわでわ。。。
