간단한 directive 사용예를 살펴보자.
지시어를 사용해서 hello-world 라는 태그를 실제 Hello World 로 출력해주는 예제이다.
단순하기 때문에 지시어를 어떻게 선언하고 어떻게 활용하는지에 대한 기본적인 이해를 얻기에 좋다.
<html ng-app="directiveExam">
<head>
<meta charset="utf-8">
<title>Directive Example</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js">
</script>
<script type="text/javascript" charset="utf-8">
//지시어 선언
//지시어는 카멜 케이스로 네이밍한다.
angular.module('directiveExam.directive', []).directive('helloWorld', function()
{
return {
restrict: 'E', //Element(태그)
template: '헬로우 월드 ㅋㅋ'
};
});
//어플리케이션 모듈을 선언하고, Directive를 인젝션한다.
var directiveExam = angular.module('directiveExam', ['directiveExam.directive']);
</script>
</head>
<body>
<!-- 지시어를 사용할 때는 스네이크 케이스로 네이밍해준다. -->
<hello-world></hello-world>
</body>
</html>
template 대신, templateUrl 을 사용해서 다른 HTML 파일을 로드해서 보여줄수도 있다.
restrict 에서 E는 element A는 attribute, C는 class, M은 comment 를 의미한다.
IE8에서는 Element 일 경우 인지가 안되는 상황이 있으므로, 주의가 필요하다.
