What is Directive?
지시, 명령. View에 관련한 명령을 내리는 모든 것을 directive라고 한다.
Component의 공통된 기능을 외부로 내보낸다.
Dependency Injective
type 지정하면 Angular가 class Instance를 생성한다.
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 함수 내부의 문자열로 관리하면 앞서 말한 동작이 가능하다.
