AngularJS directive 지시자
- Front-end
- 2019. 10. 21. 07:00
inflearn 의 Start Google Angular.js 앵귤러 과정 강좌를 보고 정리한 내용입니다.
https://www.inflearn.com/course/angular-js
지시자란 ?
AngularJS 애플리케이션에서 HTML 문서 구성을 위해 필요한 다양한 설정과 기능들을 의미합니다.
ng-app : Angular JS 애플리케이션에 대한 초기 설정
ng-init : Angular JS 애플리케이션에서 사용할 데이터 설정
ng-model : HTML에서의 입력 요소들을 컨트롤 하기 위한 지시자
ng-repeat :지정된 태그를 배열에 들어 있는 요소 만큼 반복하여 출력한다.
AngularJS directive
directive 함수를 통해 지시자를 만들 수 있으며 새롭게 만든 지시자를 이용해 HTMl 원하는 곳에 코드를 삽입할 수 있습니다.
app.directive("directive1", function(){
return {
restrict : "E",
template : "사용자 정의 지시자1"
}
})restrict 속성을 이용해 적용할 요소를 선택할 수 있습니다.
E : 태그
A : 속성
C : class 속성
M : 주석
생략 시 EA 로 설정됩니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>
<title>Insert title here</title>
<script>
var app = angular.module("test_app", [])
app.directive("directive1", function(){
return {
restrict : "E",
template : "사용자 정의 지시자1"
}
})
app.directive("directive2", function(){
return {
restrict : "A",
template : "사용자 정의 지시자2"
}
})
app.directive("directive3", function(){
return {
restrict : "C",
template : "사용자 정의 지시자3"
}
})
app.directive("directive4", function(){
return {
restrict : "M",
replace : true,
template : "<p>사용자 지시자 4 : 사용자 정의 지시자4</p>"
}
})
app.directive("directive5", function(){
return {
restrict : "EC",
template : "사용자 정의 지시자5"
}
})
</script>
</head>
<body>
<div ng-app="test_app" ng-init="data1=100;data2='문자열';data3='red';data4=[100, 200, 300]">
<p>data1 : {{data1}}</p>
<p>data2 : {{data2}}</p>
<p>data3 : {{data3}}</p>
<p style="color:{{data3}}">문자열</p>
<p ng-repeat="a1 in data4">{{a1}}</p>
<p>사용자 정의 지시자 1 : <directive1></directive1></p>
<p>사용자 정의 지시자 2 : <span directive2></span></p>
<p>사용자 정의 지시자 3 : <span class="directive3"></span></p>
<!-- directive: directive4 -->
<p>사용자 정의 지시자 5 : <directive5></directive5></p>
<p>사용자 정의 지시자 6 : <span class="directive5"></span></p>
</div>
</body>
</html>
angularjs 관련 다른 글 ▼
angular js 예제, 강의 정리 (module, controller, service, factory)