-
02 템플릿 구문 01앵귤러/03 템플릿&데이터 바인딩 2017. 8. 19. 10:55
템플릿 구문
Angular 응용프로그램은 사용자가 보고 뭘 할 수 있는지 관리합니다. 컴포넌트 클래스 인스턴스 와 사용자 지향 템플릿의 상호 작용을 통해 이를 수행합니다.
model-view-controller (MVC) 또는 model-view-viewmodel (MVVM)을 사용하여 얻은 컴포넌트/템플릿 이중성에 익숙 할 수도 있습니다. Angular에서 컴포넌트는 컨트롤러/뷰 모델의 일부이며 템플릿은 뷰를 나타냅니다.
이 페이지는 Angular 템플릿 언어에 대한 포괄적인 기술 참조입니다. 템플릿 언어의 기본 원리를 설명하고 문서의 다른 부분에서 발생할 수있는 대부분의 구문을 설명합니다.
템플릿의 HTML
HTML은 Angular 템플릿의 언어입니다. 거의 모든 HTML 구문은 유효한 템플릿 구문입니다. 단<script> 엘리먼트는 예외입니다. 스크립트는 금지되어있어 스크립트 삽입 공격의 위험을 제거합니다. 실제로는 <script>가 무시되고 브라우저 콘솔에 경고가 나타납니다. 자세한 내용은 보안 페이지를 참조하십시오.
일부 합법적인 HTML은 템플릿에서 별로 의미가 없습니다. <html>, <body> 및 <base> 엘리먼트에는 유용한 역할이 없습니다.
새로운 엘리먼트 및 속성으로 나타나는 구성 엘리먼트 및 디렉티브를 사용하여 템플릿의 HTML 어휘를 확장 할 수 있습니다. 다음 섹션에서는 데이터 바인딩을 통해 동적으로 DOM (Document Object Model) 값을 가져오고 설정하는 방법을 학습합니다.
보간 ({{...}})
Angular 교육 초기에 {{ 와 }}의 이중 중괄호 보간을 만났습니다.
src/app/app.component.html
<p>My current hero is {{currentHero.name}}</p>
보간법을 사용하여 계산 된 문자열을 HTML 엘리먼트 태그와 속성 할당 사이의 텍스트에 직조합니다.
src/app/app.component.html
<h3>
{{title}}
<img src="{{heroImageUrl}}" style="height:30px">
</h3>
중괄호 사이의 텍스트는 종종 컴포넌트 속성의 이름입니다. Angular는 해당 이름을 해당 컴포넌트 속성의 문자열 값으로 바꿉니다. 위의 예에서 Angular는 title 및 heroImageUrl 속성을 평가하고 "공백을 채 웁니다". 먼저 굵은 응용프로그램 제목과 영웅의 이미지를 표시합니다. 좀더 일반적으로, 중괄호 사이의 텍스트는 Angular가 먼저 평가 한 다음 문자열로 변환하는 템플릿 표현식입니다. 다음 보간법은 두 숫자를 더하여 결과를 보여줍니다.
src/app/app.component.html
<!-- "The sum of 1 + 1 is 2" -->
<p>The sum of 1 + 1 is {{1 + 1}}</p>
표현식은 getVal ()과 같은 호스트 컴포넌트의 메소드를 호출 할 수 있습니다.
src/app/app.component.html
<!-- "The sum of 1 + 1 is not 4" -->
<p>The sum of 1 + 1 is not {{1 + 1 + getVal()}}</p>
Angular는 이중 중괄호 안의 모든 표현식을 평가하고 표현식 결과를 문자열로 변환 한 다음 인접한 리터럴 문자열과 연결합니다. 마지막으로이 복합 보간 결과를 엘리먼트 또는 디렉티브 속성에 지정합니다.
엘리먼트 태그 사이에 결과를 삽입하고 속성에 할당하는 것처럼 보입니다. 정확하게 사실이 아니지만. Interpolation은 Angular가 아래에 설명 된대로 속성 바인딩으로 변환하는 특수 구문입니다.
먼저 템플릿 표현식과 문장을 자세히 살펴 보겠습니다.
'앵귤러 > 03 템플릿&데이터 바인딩' 카테고리의 다른 글
02 템플릿 구문 05 (0) 2017.08.19 02 템플릿 구문 04 (0) 2017.08.19 02 템플릿 구문 03 (0) 2017.08.19 02 템플릿 구분 02 (0) 2017.08.19 01 데이터의 표현 (0) 2017.08.18