Angular의 템플릿

Angular에서 템플릿은 사용자 인터페이스(UI) 조각의 청사진입니다. 템플릿은 HTML로 작성되며 템플릿 내에서 특수 구문을 사용하여 많은 Angular 기능을 기반으로 빌드할 수 있습니다.

Angular는 추가 기능으로 템플릿의 HTML 구문을 확장합니다.
예를 들어 Angular의 데이터 바인딩 구문은 DOM(문서 개체 모델) 속성을 동적으로 설정하는 데 도움이 됩니다.

거의 모든 HTML 구문은 유효한 템플릿 구문입니다. 그러나 Angular 템플릿은 UI의 일부일 뿐이므로 <html>, <body> 또는 <base>와 같은 요소는 포함하지 않습니다.

참고:- 스크립트 삽입 공격의 위험을 제거하기 위해 Angular는 템플릿에서 <script> 요소를 지원하지 않습니다. Angular는 <script> 태그를 무시하고 브라우저 콘솔에 경고를 출력합니다. 자세한 내용은 보안 페이지를 참조하십시오.

보간으로 값 표시

보간은 마크업된 텍스트에 표현식을 삽입하는 것을 말합니다. 기본적으로 보간은 이중 중괄호 {{ 및 }}를 구분 기호로 사용합니다.

예:

app.component.ts

message = "Here is the initialize message";

<p> {{message}} </p>

예:-

<p>{{title}}</p>
<div><img alt="item" src="{{itemImageUrl}}"></div>

app.component.ts

message = "Here is the initialize message";
getMessage():string{
  return this.message;
}

<p>{{getMessage()}}</p>

템플릿 문은 사용자 이벤트에 응답하기 위해 HTML에서 사용할 수 있는 메서드 또는 속성입니다. 템플릿 문을 사용하면 애플리케이션에서 동적 콘텐츠 표시 또는 양식 제출과 같은 작업을 통해 사용자를 참여시킬 수 있습니다.

예:-

(click) = "updateMessage()"
<button (click) = "updateMessage()">Update Message</button>

템플릿 표현식과 마찬가지로 템플릿 문은 JavaScript와 유사한 언어를 사용합니다. 그러나 템플릿 문에 대한 구문 분석기는 템플릿 표현식에 대한 구문 분석기와 다릅니다. 또한 템플릿 문 구문 분석기는 특히 기본 할당(=)과 세미콜론(;)이 있는 연결 식을 모두 지원합니다.

다음 JavaScript 및 템플릿 표현식 구문은 허용되지 않습니다.

1. 새로운
2. 증가 및 감소 연산자, ++ 및 —
3. += 및 -=와 같은 연산자 할당
4. |와 같은 비트 연산자 그리고 &
5. 파이프 운영자