[AngularJS] (5) 지시자 | angular.directive(), ng-app, ng-init, ng-repeat

목차

(1) 기본 웹 서비스 개발환경 구축

(2-1) 기본 예제

(2-2) AngularJS 템플릿 만들고 적용하기

(3) 표현식 | {{data}}

(4) 모듈 | angular.module("appName", [])

(5) 지시자 | angular.directive(), ng-app, ng-init, ng-repeat

(6) 모델 | ng-model, ng-show, valid, dirty, touched

(7) Controller

(8) scope 객체 | scope, rootScope

(9) 필터 | uppercase, lowercase, orderBy, currency, date, filter, json, limitTo, number

(10) 서비스 | location, get, timeout, interval, app.service()

 

---

1. Angular JS의 지시자 사용하기

AugularJS 애플리케이션에서 HTML 문서 구성을 위해 필요한 다양한 설정과 기능들을 지칭하는 것을 의미한다.

- ng-app    : 애플리케이션 초기설정. ng-app의 이름을 설정하고 모듈 객체를 생성할 수 있다.

- ng-init     : 애플리케이션에서 사용할 데이터 설정

- ng-model : HTML에서의 입력 요소 컨트롤을 위한 지시자

- ng-repeat : 지정된 태그를 배열에 들어있는 요소만큼 반복 출력 

 

 

> ng-app : 애플리케이션 초기설정. ng-app의 이름을 설정하고 모듈 객체를 생성할 수 있다.

 

 

> ng-init : 애플리케이션에서 사용할 데이터 설정

 

 

> ng-repeat : 지정된 태그를 배열에 들어있는 요소만큼 반복 출력 

 

 

2. directive()로 지시자 만들어서 사용하기 

directive 함수를 통해 지시자를 만들 수 있으며 새롭게 만든 지시자를 이용해 원하는 곳에 HTML 코드를 삽입할 수 있다.

<script>
...
	app.directive("directive1", function(){
    	return {
        	restrict : "E",
            template : "사용자 정의 지시자1"
        }
    })

</script>

restrict 속성을 이용해 적용할 요소를 선택할 수 있다.

- E : 태그

- A : 속성

- C : class 속성

- M : 주석

- 중복으로 설정할 수 있다. ex) restrict : EC

- 생략시 EA로 설정된다.

 

> restrict : E or A

 

> restrict : C or M

   * M일경우 replace 속성은 true, template에는 html 속성을 넣어줘야 한다.