これまでのAngularJSのメモ
Directiveを使わないAngulrJSアプリ
index.html
<html >
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="bower_components/angular/angular.js"></script>
</head>
<body ng-app>
<div>
{{ "Hello World!"}}
</div>
</body>
</html>
お決まりのHello Worldが表示されていると思います。
Directiveを使うAngulrJSアプリ
index.html
<body ng-app="mainApp">
<hello-world></hello-world>
</body>
hello-worldタグを作成します。
ここで注意したいのは、helloWorldタグにしないことです。
テンプレートを作成します。
templates/helloWorld.html
<div>
{{ "Hello World!"}}
</div>
main.js
(function(){
var app = angular.module('mainApp', {});
app.directive("helloWorld", function(){
return {
restrict : 'E',
templateUrl : "templates/helloWorld.html"
};
});
})();
directiveの表記はhello-worldでなく、helloWorldです。
restrictは、HTMLをどのようにするか指定します。
Eは要素名を意味します。
詳しくはdirectiveで、、
https://docs.angularjs.org/guide/directive