1. 소개
1. 템플릿 문법
Angular에서 이야기하는 템플릿(template)은 HTML 뭉치(chunk)를 이야기한다. Angular 템플릿에는 Angular의 기능을 활용할 수 있는 특별한 문법을 사용할 수 있다.
2. 사전지식
템플릿 문법에 대해 알아보려면 다음 내용을 먼저 이해하고 있는 것이 좋다:
- Angular 개요
- JavaScript
- HTML
- CSS
Angular 템플릿은 브라우저에 표시되는 화면의 일부를 담당하는 HTML 뭉치이다. Angular HTML 템플릿은 일반 HTML과 마찬가지로 화면을 렌더링하고, 사용자와 상호작용하는 것 외에도 다양하게 활용할 수 있다.
Angular CLI로 Angular 앱을 생성하면 기본 컴포넌트가 생성되면서 이 컴포넌트의 템플릿 파일 app.component.html 파일도 함께 생성된다.
템플릿 문법 가이드 문서에서 설명하는 내용을 학습하면서 클래스에 있는 데이터를 템플릿에 표시하고, 템플릿에서 일어나는 이벤트를 반응하는 방법에 대해 알아보자.
Note
- 개별 템플릿 가이드 문서는 설명하는 내용과 관련된 예제를 함께 제공한다.
- 모든 기능이 추가된 앱은 어떻게 동작하는지 확인하려면 Template Syntax Live Code / 다운로드 링크를 참고한다.
3. HTML 확장하기
템플릿에 Angular 문법을 사용하면 기존 HTML의 기능을 확장할 수 있다. 템플릿 함수, 템플릿 참조 변수, 이벤트 감지, 데이터 바인딩과 같은 기능을 사용해서 DOM(Document Object Model)의 값을 참조하거나 설정하는 방식이 그렇다.
HTML 문서에 사용할 수 있는 문법은 템플릿에도 대부분 사용할 수 있다. 하지만 Angular 템플릿은 웹 페이지 전체가 아니라 화면 일부만 담당하기 때문에 <html>이나 <body>, <base> 엘리먼트는 사용할 수 없다. Angular 컴포넌트는 화면의 일부분만 집중하는 방식으로 개발한다.
Note
- 스크립트 인젝션 공격(script injection attack)을 방지하기 위해 Angular 템플릿에는
<script>엘리먼트를 사용할 수 없다. - 만약
<script>엘리먼트가 사용되더라도 Angular는 이 엘리먼트를 무시하며 브라우저 콘솔에 경고 메시지를 출력한다.