Angular Template Syntax
Contents
앵귤러에서는 HTML의 덩어리로써 템플릿을 사용한다.
그리고 앵귤러는 템플릿 안에서 사용할 수 있는 여러 기능들을 특별한 문법을 통해 지원한다. 이를 템플릿 문법 (template syntax)라고 부른다.
HTML을 더 강력하게 만들어요
템플릿에서 특별한 앵귤러의 문법을 사용해 애플리케이션의 HTML의 사용성을 증가시킬 수 있다.
예를 들어
- 기본 제공 템플릿 함수
- 변수
- 이벤트 수신
- 데이터 바인딩과 같은 기능을 지원한다.
템플릿 문법을 사용해서 DOM의 값을 동적으로 가져오고 설정할 수 있도록 도와준다.
거의 모든 HTML 구문은 유효한 템플릿 문법이다. 하지만 앵귤러 템플릿은 전체 페이지가 아닌 일부분이기 때문에 <html>, <body>, <base>와 같은 엘리먼트를 포함할 필요 없이 개발 중인 페이지의 일부분에만 집중할 수 있다. (이전에 정리했던 뷰의 캡슐화와도 연관이 있는 개념 같다)
주의해야 할 점
스크립트 주입 공격을 방지하기 위해서 앵귤러는 템플릿 내부에 <script> 태그를 삽입하는 것을 금지한다.
- 앵귤러는
<script>태그를 무시하고 브라우저 콘솔에 경고를 띄운다.
템플릿 문법에는 어떤 것들이 있을까?
이전에 정리했던 양방향 바인딩 문법 ([(value)]) 도 템플릿 문법에 속한다.
이외에 인터폴레이션 ({{value}})를 통해서 앵귤러의 변수를 화면에 출력할 수 있을 뿐만 아니라
애트리뷰트, 클래스, 스타일의 값을 설정할 수도 있다.