간단 사용자 지시자(custom directive) 만들기
<!DOCTYPE html>
<html ng-app="web">
<head>
<script data-require="angular.js@1.6.2" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<script src="directives.js"></script>
</head>
<body ng-controller="WebController">
<!--angular에서 카멜케이스로 지정하지만 여기서는 '-'으로 구분 -->
<div>
<my-title />
</div>
<ul ng-repeat="Fruit in Fruits">
<my-item />
</ul>
</body>
</html>
script.js
(function() {
var app = angular.module('web', []);
app.controller("WebController", ["$scope", function($scope) {
$scope.Fruits = ['Apple', 'Orange', 'Cherry'];
$scope.Title = "TEST";
}])
})();
directives.js
// 지시자 이름을 카멜케이스로 한다.
angular.module('web').directive('myTitle', function() {
return {
template: '<h1>테스트</h1>'
}
});
angular.module('web').directive('myItem', function() {
return {
templateUrl: 'item.tmpl.html'
}
});
item.template.html
<li>{{Fruit}}</li>
