Directive
Directive는 DOM의 모양이나 동작 등을 관리하기 위한 명령이다. HTML Element 또는 Attribute 형태로 사용한다.
Directive를 사용하는 HTML Element를 Directive 내에서 Host element라고 부르며, Directive 내부에서 host element의 event를 처리하거나 style 등을 변경할 수 있다.
Angular Built-in Directive
Angular Data Binding
Interpolation
Property Binding
[propertyName] = "expression"
" " 내부에는 string이 아니라 expression(표현식)이 오는 곳이므로 주의하자.
Attribute and Property
Attribute는 HTML Element의 attribute이고 Property는 DOM node object인 HTML Element 객체의 property이다. 초기에 HTML Attribute가 초기값으로 그려지고 Property는 실시간으로 변경되는 DOM 최신값을 반영한다.
2> <input value="Initial Value" [value]="Property Value">
>
앞의 value는 attribute이고 [value]는 property이다. Property는 최신값이므로 실행시 “Property Value”가 view에 보여지게 된다.
Angular Component
Angular Application은 component를 중심으로 구성되는만큼 component는 Angular의 핵심 개념이다.
Component는 application의 화면을 구성하는 View를 생성하고 관리한다.
Component는 template의 중첩 관계에 의해서 tree 구조를 갖는다. 여러 component 사이의 통신과 상태 관리를 위해서 Service가 있다.
Angular Basics
Angular
Angular는 SPA(Single Page Application) 개발을 위한 Google의 Open source JavaScript Framework.
Framework and Library
Library는 관련있는 함수를 모아놓아 개발자가 사용할 수 있는 도구이다. 즉, Library는 개발자에 의해 사용된다.
Framework는 클래스와 인터페이스의 집합으로 Application의 Flow를 쥐고 있다. 개발자가 Framework 틀 내부에서 작업하는 것이다.
전통적인 웹 개발에서 JavaScript는 HTML/CSS에 의존한다. 의존한다는 것은 HTML/CSS에 접근해서 조작하는 방식으로 JavaScript 코드가 작성되었다는 것을 뜻한다. 이는 HTML/CSS가 변경되면 JavaScript 코드도 영향을 받음을 의미한다.
Angular는 HTML/CSS가 JavaScript에 의존하도록, 즉 JavaScript 코드의 상태 데이터 (State)에 바인딩해서 상태가 변경될 때마다 Rendering되도록 한다. HTML/CSS를 JavaScript의 Rendering 함수 내부의 문자열로 관리하면 앞서 말한 동작이 가능하다.
