Angular Service & Dependency Injection

Service

Component는 View를 구성하고 관리하는 역할을 해야한다. 그러나 View를 구성하다보면 필요한 데이터를 가져오기 위해서 서버와 통신을 하는 등의 부가 기능이 필요하게 된다. 이런 기능을 Component에서 하지 않고 Service로 분리한다.

Component의 관심사와 Application 전역의 관심사를 분리하는 것이다. 이렇게 기능을 분리하면 Application의 복잡도가 낮아지고 서비스를 재사용할 수 있다. 또한 의존도가 낮아져 유지보수성이 좋아진다.

Angular Directive

Directive

Directive는 DOM의 모양이나 동작 등을 관리하기 위한 명령이다. HTML Element 또는 Attribute 형태로 사용한다.

Directive를 사용하는 HTML Element를 Directive 내에서 Host element라고 부르며, Directive 내부에서 host element의 event를 처리하거나 style 등을 변경할 수 있다.

Angular Pipe

AngularJS에는 60여개의 built-in Pipe가 있었으나 Angular는 9개의 built-in pipe를 지원한다. 나머지 기능은 pipe를 직접 구현하여 사용할 수 있다.

pipe meaning
date 날짜 형식 변환
json JSON 형식 변환
uppercase 대문자 변환
lowercase 소문자 변환
currency 통화 형식 변환
percent 퍼센트 형식 변환
decimal 자리수 형식 변환
slice 문자열 추출
async 비동기 객체 출력

Angular Built-in Directive

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 최신값을 반영한다.

1
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가 있다.

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×