[Angular] 템플릿과 템플릿 문법

템플릿과 템플릿 문법 (Template)

템플릿 (Template) 란?

• 템플릿은 HTML과 Angular 고유의 템플릿 문법을 사용하여 UI의 초사 단위인 컴포넌트의 뷰를 정의
• 동적으로 변하는 데이터는 컴포넌트 클래스가 관리하며 템플릿 문법의 데이터 바인딩에 의해 정적 HTML에 포함
• 뷰 생성과정
  • Component class에서 데이터 바인딩을 통해 데이터와 템플릿이 합쳐져 compile을 통해 최종적인 view를 생성
• Angular는 템플릿과 컴포넌트 클래스로 뷰와 모델(데이터와 비즈니스 로직)을 분리한다.

• Angular는 컴포넌트 기반 개발 (CBD, Component Based Development) 프레임워크

  • MVC와 MVVM패턴과 일치하지 않지만 템플릿은 뷰(View)를 나타내고 컴포넌트 클래스는 Controller와 ViewModel의 일부를 담당

• 역할 종류

  • 모델 (Model)
  • 애플리케이션에서 사용되는 데이터 형식을 말한다. 비즈니스 로직, 유효성 검사 및 그외 다양한 기능 포함
  • 뷰 (View)
  • 사용자에게 모델(데이터)을 표시하는 것, 뷰는 같은 모델을 다양한 방식으로 표현할 수 있다.
  • 컨트롤러 (Controller)
  • 모델과 뷰의 상호 작용을 감시하고 업데이트
  • 뷰모델 (ViewModel)
  • 뷰가 데이터 바인딩을 통해 컨트롤러의 역할

• DOM의 상태 변경 전달 순서

  • DOM은 상태(input요소에 값을 입력한 상태, checkbox 요소를 체크한 상태)를 갖고 있으며, 뷰와 모델은 분리되어 있지만 상태는 공유되어야 한다.
  • DOM의 상태가 변경되면 템플릿은 변화를 감지하고 변화된 상태를 컴포넌트 클래스에 전달
  • 컴포넌트 클래스는 비즈니스 로직을 실행하고 템플릿에 실행 결과를 공유
  • 템플릿은 이를 전달받아 DOM 업데이트

• 템플릿은 선언형 프로그래밍 (Declarative programming) 방식으로 뷰와 모델의 관계를 관리.

• Angular는 변화 감지(Change detection)메커니즘 위에서 동작하는 데이터 바인딩(Data binding)을 통해 템플릿과 컴포넌트 클래스를 긴밀하게 연결하고 동기화
• 템플릿과 컴포넌트 클래스는 데이터 바인딩 (인터폴레이션, 프로퍼티 바인딩, 이벤트 바인딩, 양방향 바인딩으로 연결) (예: {{expression}})
• 변화감지 (change detection)은 zone.js에서 업데이트 변화 감시를 한다.

템플릿 문법 (Template Syntax)

• 템플릿과 컴포넌트 클래스 간 데이터 공유를 위한 데이터 바인딩과 동적으로 DOM 구조, 스타일 등을 변경할 수 있는 빌트인 디렉티브 등 지원
• 정적인 뷰는 HTML만으로 정의할 수 있지만 컴포넌트와 연계하여 동적으로 변화하는 뷰를 정의하기 위해서 템플릿 문법을 사용
• 데이터 바인딩
  • 인터폴레이션
  • 프로퍼티 바인딩
  • 어트리뷰트 바인딩
  • 클래스 바인딩
  • 스타일 바인딩
  • 이벤트 바인딩
  • 양방향 데이터 바인딩
• 빌트인 디렉티브
  • 빌트인 어트리뷰트 디렉티브
  • ngClass
  • ngStyle
  • 빌트인 구조 디렉티브
  • ngIf
  • ngFor
  • ngSwitch
• 템플릿 참조 변수

• 템플릿 표현식 연산자

• [참고]

  • http://poiemaweb.com/angular-component-template