앵귤러 템플릿은 화면에 표시되는 부분을 구성합니다. 앵귤러 템플릿은 일반 HTML파일에서 사용하는 모든 요소의 사용이 가능하며 전체적인 틀은 동일하나 전체화면의 부분을 구성하기 때문에 (컴포넌트 방식) 루트인 <html>이나 <body> 태그는 포함하지 않는다는 특징과 TypeScript와의 binding을 통해 동적구성이 가능하다는 점에서 차이가 있습니다.
앵귤러 템플릿은 아래와 같이 다양한 문법을 제공합니다.
일반문법
template expression (statement)
앵귤러 템플릿 - template expression (statement)
template expression은 interpolation과 같은 문법을 사용하지만 가치를 템플릿에서 생성한다는 차이점이 있습니다. 주의할 점은 JavaScript의 일부 표현은 템플릿에서 사용이 불가한데요. 사용할 수 없는
jin-co.tistory.com
바인딩 (Bindings)
바인딩은 템플릿 (view)과 TypeScript class (model) 사이에 연결고리를 생성하고 서로가 상대의 변화를 실시간으로 반영하게 해 주는 기능으로 동적 애플리케이션을 만들기 위한 필수 기능이며 property, event, attribute name이나 directive source에 가능합니다.
앵귤러는 데이터가 흐르는 방향을 기준으로 아래와 같이 세 가지 형태의 바인딩을 제공합니다.
- one way binding: 데이터 소스 (model) -> 브라우저 (view) / 기호 (interpolation 제외): []
- one way binding: 브라우저 (view) -> 데이터 소스 (model) / 기호: ()
- two way binding: 데이터 소스 (model) <- -> 브라우저 (view) / 기호: [()]
그럼 본격적으로 바인딩에서 사용할 수 있는 문법들에 대해 알아보겠습니다.
1. one-way binding: 데이터 소스 (model) -> 브라우저 (view)
앵귤러 템플릿 - interpolation
imterpolation은 TypeScript에서 동적가치를 템플릿을 가져오거나 템플릿에서 생성하여 표시하게 해 주는 기능입니다. 사용방법 구현하는 방법은 아래와 같이 이중 중괄호 ( {{ }} ) 안에 표시하고자 하
jin-co.tistory.com
앵귤러 템플릿 - property (attribute) binding
HTML에는 요소 (element)가 존재합니다. 그리고 각 요소마다 가질 수 있는 속성 (attribute)이 존재하는데요. 앵귤러 property binding은 이러한 HTML요소의 속성과 상응하는 DOM property를 동적으로 변화시키는
jin-co.tistory.com
앵귤러 템플릿 - attribute binding
HTML에는 요소 (element)가 존재합니다. 그리고 각 요소마다 가질 수 있는 속성 (attribute)이 존재하는데요. 앵귤러 property binding은 이러한 HTML요소의 속성과 상응하는 DOM property를 동적으로 변화시키는
jin-co.tistory.com
앵귤러 템플릿 - class binding
앵귤러 class 바인딩은 특정요소에 동적으로 클래스를 추가하거나 삭제하는 기능입니다. 사용방법 class.componet.html class.componet.css div { height: '100px'; width: '100px'; } div.show { background-color: 'blue'; } class.c
jin-co.tistory.com
앵귤러 템플릿 - style binding
앵귤러 style 바인딩은 특정 요소에 동적으로 스타일을 추가하거나 제거하는 기능입니다. 사용방법 style.componet.html style.componet.css div { height: '100px'; width: '100px'; } class.componet.ts import { Component } from '
jin-co.tistory.com
2. one-way binding: 브라우저 (view) -> 데이터 소스 (model)
앵귤러 템플릿 - event binding
이벤트 바인딩은 화면에 입력된 유저의 행동을 감지하고 해당 정보를 데이터 소스로 보내주는 역할을 합니다. 사용방법 앵귤러이벤트는 HTML에서 제공하는 이벤트 명 (on 제외)을 괄호로 감싸서
jin-co.tistory.com
3. two-way binding: 데이터 소스 (model) <-> 브라우저 (view)
앵귤러 템플릿 - two-way binding
이벤트바인딩은 화면에서 일어나는 이벤트만 감지하여 데이터소스로, property 바인딩은 데이터소스에서 일어나는 데이터의 변화만 감지하여 화면으로 보내줍니다. 따라서, 이벤트바인딩은 데이
jin-co.tistory.com
다른 기능들
앵귤러 템플릿 - directives
디렉티브는 앵귤러 앱에 추가기능을 더해주는 기능을 합니다. 디렉티브는 크게 아래와 같이 나누어지는데요. 컴포넌트 (Components) 속성 (Attribute) 구조 (Structural) 속성 (Attribute) 디렉티브 스타일이
jin-co.tistory.com
앵귤러 템플릿 - Template Reference Variable
템플릿 참조 변수는 템플릿에 한 요소가 다른 요소를 참조할 수 있게 해 줍니다. 변수 생성은 요소에 #과 함께 이름을 지정합니다. 이후 다른 요소에서 해당 요소를 참조하여 값 등을 사용하는
jin-co.tistory.com
앵귤러 템플릿 - Pipes
참고 Angular angular.io
jin-co.tistory.com
참고
Angular
angular.io
'프론트엔드 > 앵귤러' 카테고리의 다른 글
| 앵귤러 템플릿 - property binding (2) | 2022.12.26 |
|---|---|
| 앵귤러 템플릿 - interpolation (0) | 2022.12.26 |
| 앵귤러 콤포넌트 (0) | 2022.12.22 |
| 앵귤러 라이브러리 - 앵귤러 시메틱스 (0) | 2022.12.22 |
| 앵귤러 라이브러리 - Angular PWA (0) | 2022.12.22 |
