템플릿

템플릿(Template)은 HTML과 Angular 고유의 템플릿 문법(Template Syntax)을 사용하여 UI의 최소 단위인 컴포넌트의 뷰를 정의한다.

앵귤러의 뷰모델

DOM은 상태(사용자가 값입력, 체크박스 체크...)를 가지고 있으며 이 상태는 변화하는 살아있는 것이다. 비록 뷰와 모델은 분리되어있지만 상태는 공유되어야 한다.

DOM의 상태가 변화하면 템플릿은 변화를 감지하고 변화된 상태를 클래스에 변화를 알린다.

클래스는 이에 대응하는 로직을 실행하고 결과를 템플릿과 공유한다.

템플릿은 이를 전달받아 DOM을 갱신한다.

앵귤러는 변화감지 매커니즘위에서 동작하는 데이터바인딩을 통해 템플릿과 클래스의 긴밀히 연결하고 동기화를 유지한다.

템플릿 문법(Template Syntax)

• 데이터 바인딩
  • 인터폴레이션(Interpolation)
  • 프로퍼티 바인딩(Property binding)
  • 어트리뷰트 바인딩(Attribute binding)
  • 클래스 바인딩(Class binding)
  • 스타일 바인딩(Style binding)
  • 이벤트 바인딩(Event binding)
  • 양방향 데이터 바인딩(Two-way binding)

• 빌트인 디렉티브(Built-in directive)

  • 빌트인 어트리뷰트 디렉티브(Built-in attribute directive)

    • ngClass
    • ngStyle

  • 빌트인 구조 디렉티브(Built-in structural directive)
    - ngIf
    - ngFor
    - ngSwitch
    
    

• 템플릿 참조 변수(Template reference variable)

• 템플릿 표현식 연산자(Template expression operator)