[Angular] Angular Template Syntax

Angular 템플릿 문법

템플릿 문법은 템플릿을 작성하기 위한 Angular 고유의 확장 표기법으로 템플릿과 컴포넌트 클래스 간 데이터 공유를 위한 데이터 바인딩과 동적으로 DOM 구조, 스타일 등을 변경할 수 있는 빌트인 디렉티브 등을 지원한다.

 

템플릿 엔진 - Pug, Handlebars, EJS, JSP ..

 

- 데이터 바인딩(Data Binding)

• 인터폴레이션(Interpolation)
• 프로퍼티 바인딩(Property Binding)
• 어트리뷰트 바인딩(Attribute Binding)
• 클래스 바인딩(Class Binding)
• 스타일 바인딩(Style Binding)
• 이벤트 바인딩(Event Binding)
• 양방향 데이터 바인딩(Two-way Binding)

- 빌트인 디렉티브(Built-in Directive)

• 빌트인 어트리뷰트 디렉티브(Built-in Attribute Directive) - ngClass, ngStyle
• 빌트인 구조 디렉티브(Built-in Structural Directice) - ngIf, ngFor, ngSwitch

- 템플릿 참조 변수(Template Reference Variable)

- 템플릿 표현식 연산자(Template Expression Operator)

 

 

 

※ 템플릿 내 사용 금지 항목

1. Script 요소 - 보안상 문제
2. 대입 연산자 - 템플릿 표현식 내에서 데이터를 변경할 수 있는 연산은 사용을 금지 
3. 증감 연산자 - 템플릿 표현식 내에서 데이터를 변경할 수 있는 연산은 사용을 금지 
4. 비트 연산자 - 템플릿 표현식 내에서 데이터를 변경할 수 있는 연산은 사용을 금지 
5. 객체 생성 연산자(New)
6. 전역 스코프를 갖는 빌트인 객체 (window, document, location, console 등
7. html, body, base 요소 - 최상위 컴포넌트인 루트 컴포넌트는 html, body 요소의 자식요소이고 중복되기때문에