[AngularJS 2.0] Angular 용어 정리

https://angular.io/docs/ts/latest/guide/architecture.html 를 참고하였습니다.

1. Module

이 블로그에 정리가 잘되어있으므로 패스

http://dalkomit.com/95

2016.07.29 추가 내용

 @angular/core 

여러 모듈을 하나로 묶어주는 통합모듈, 소스를 실제로 보면 여러 모듈을 다시 export한다.

여러 모듈을 묶어서 export하는 모듈을 barrel이라고 한다.

2016.09.19 추가 내용

Angular는 많은 모듈로 이루어져있다.

Module은 다른 module에 의해 import 될 수 있다.

import 시 핵심 모듈은 @를 붙인다. @angular/core, @angular/common

Module은 export할 때 여러 자료형을 가진다. Classes, function,  values

2. Template

템플릿은 컴포넌트를 어떻게 랜더링 할 것인지를 Angular에게 알려주는 형식이다. 우리는 컴포넌트에 동반되어있는 템플릿으로 컴포넌트의 뷰를 정의한다.

2016.09.19 추가 내용

Template은 Component가 Render 하여 생성된다.

3. Metadata

Angular가 Class를 어떻게 처리해야할지를 정의

컴포넌트를 구성하는 정보를 JSON 객체로 정의한 것이며, Angular에게 클래스를 처리하는 방법에 대해 말해준다. 클래스에 metadata를 붙임으로 컴포넌트가 된다. TypeScript에서는 decorator(코드내에서 필요에 따라 부가적인 정보나 속성을 표현 하기 위한 언어적 장치)를 사용하여 metadata를 붙인다. 

Decorator의 예로는, @Component, @Injectable, @Input, @Output 등의 Decorator가 있다.

Metadata의 예로는 template,selector,styles,directives,providers 등이 있다.

 @Component 

component를 만들고 화면에 띄울때 Angular에게 알려주어야할 정보를 정의

< @component의 configration options >

selector : 컴포넌트 인스턴스를 삽입할 위치

templateUrl : 컴포넌트의 템플릿이 있는 주소

directives : 템플릿이 요구하는 컴포넌트나 디렉티브의 배열

예를들어 우리는 <hero-detail>에 내용을 표시하기 위하여 HeroDetailComponent를 directives array에 추가하였다.

providers : 컴포넌트가 요구하는 서비스 DI providers의 배열

3. Data binding

Angular는 컴포넌트의 부분과 템플릿의 일부를 조정하기 위한 방법으로 데이터 바인딩을 지원한다.우리는 어떻게 양쪽을 연결하는지 Angular에게 알리기 위하여 HTML 템플릿에 바인딩 마크업을 추가한다.

데이터 바인딩의 네가지 형태

●  interpolation(보간, 덧붙히다)
    component의 상태를 그대로 화면에 노출

●  property binding
    component 상태의 값을 DOM의 property에 직접 반영

●  event binding
    element에 event를 binding하는 것

●  Tow way data binding( ngModel )

그림의 그려진 4개의 화살표가 데이터가 반영되는 방향을 의미하고 화살표 위에 내용이 실제 문법적 표현을 나타냅니다.

2016.07.28 추가 내용 : Binding 추가 설명 보기

http://www.notforme.kr/archives/1727

2016.08.22 추가 내용 : Binding 추가 설명 2

2016.09.19 추가 내용

특정 class name에 property 할당?

class binding allows us to specify a CSS class to add to a DOM element if a component property is true.

<div [class]="property"> // X, This will overwirte all classes.
 
<div [class.name]="property"> // O, This will only add/remove the specific class.
 
class names with dashes also work fine.
<div [class.my-name]="property"> 
 

4. Directives

Angular template은 동적이다. Angular가 랜더링 할 때, 주어진 directives 지시에 따라 DOM을 변환한다. directives는 directive metadata의 클래스이다. TypeScript에서 metedata를 클래스에 붙이기 위하여 @Directive 데코레이터를 사용한다.에 따라  는 컴포넌트의 부분과 템플릿의 일부를 조정하기 위한 방법으로 데이터 바인딩을 지원한다. 우리는 어떻게 양쪽을 연결하는지 Angular에게 알리기 위하여 HTML 템플릿에 바인딩 마크업을 추가한다.

A component is a directive-with-a-template; a @Component decorator is actually a @Directive decorator extended with template-oriented features.

 Structural directives(구조 지시자) 

DOM의 element를 더하고, 삭제하고, 대체함으로써 레이아웃을 변경한다.

예를 들어 *ngFor(<li>태그안에서 heroes list에 따라 요소가 추가된다), *ngIf(조건에 따라 나타날수도, 나타나지 않을 수도 있다.)

 Attribute directives(속성 지시자) 

기존 elements의 모양이나 동작을 변경.

예를들어 양방향 데이터 바인딩을 수행하는 ngModel은 이미 존재하는 엘리먼트(주로 <input>태그)를 이벤트에 따라 표시되는 값을 셋팅해준다.

2016.07.28 추가 내용 : directives 추가 설명 보기

4. Service

재사용이 빈번한 기능을 서비스로 정의

서비스는 응용 프로그램이 요구하는 값, 함수, 기능을 포괄하는 광범위한 범주이다. 거의 모든 것이 서비스가 될 수있다. 

서비스의 종류

●  logging service

●  data service

●  message bus

●  tax calculator

●  application configuration

우리는 컴포넌트 클래스가 가볍기를 원한다. 컴포넌트는 서버로부터 데이터를 가져오거나, 사용자 입력을 검증하거나, 콘솔에 출력하지 않는다. 이러한 일들은 서비스에게 위임한다. 서비스에 로직을 반영하고 컴포넌트에 해당 서비스를 사용할 수 있도록 하는 것이 의존성 주입(Dependency Injection)이다.

2016.09.19 추가 내용

Services are used to organize and share code across your app, and they're usually where we create our data access methods.

1. component.ts -> service.ts

Asks the service for data

2. service.ts -> data

Fetches the appropriate data

5. Dependency Injection (DI)

 DI는 코드를 조직화하고 단위별로 테스트 가능하게 한다.

 완전히 형성된 종속 클래스의 새로운 인스턴스를 공급하는 방법이다. 종속성의 대부분이 서비스이다. Angular는 필요로하는 서비스와 컴포넌트를 제공하기 위하여 DI를 사용한다. 생성자 매개 변수의 유형을 보고 필요한 컴포넌트를 서비스에게 알려준다.

 Angular가 컴포넌트를 만들 때, 먼저 Injector에게 컴포넌트가 필요하다고 서비스에 대한 요청을 한다. 인젝터는 이전에 생성한 서비스 인스턴스의 컨테이너를 유지한다. 요청 된 서비스 인스턴스가 컨테이너에 없으면 인젝터를 만들고 Angular에게 서비스를 반환하기 전에 컨테이너에 추가한다. 요청 된 모든 서비스가 사용되고 반환 된 경우, Angular는 인수(Argument)로 서비스와 컴포넌트의 생성자를 호출 할 수 있다.인젝터가 없는 경우 사전에 서비스의 Providers에 등록해야한다. provider는 서비스를 생성하거나 반환 할 수 있다.

 어플리케이션의 모든 곳에서 동일한 서비스의 인스턴스가 사용 할 수 있도록 루트수준에서 부트스트랩을 추가할 수 있다. 또, 컴포넌트 수준에서 속성으로 Provider를 등록할 수 있다.

●  Dependency injection is wired into the Angular framework and used everywhere.

●  The injector is the main mechanism
        An injector maintains a container of service instances that it created.
        An injector can create a new service instance from a provider.

●  A provider is a recipe for creating a service.

●  We register providers with injectors.

2016.09.19 추가 내용

An injector is in charge of knowing how to create and send things.

6. Component

 Angular2는 컴포넌트 중심으로 개발 진행

컴포넌트는 Template과 Logic을 포함한다.

component는 하나의 독립적인 모듈결합을 가진다.

component는 다른 component나 service를 의존주입 받을 수 있다.

7. Bootstrap

 bootstrap  

bootstrap은 두번째 인자로 injector binding의 목록을 가진다. injector 가 생성되었을때 바인딩이 사용된다. 즉 routerInjectables을 통과하는 모든 바인딩은 응용 프로그램 전체에 사용할 수 있다.

takes a list of injector bindings as second argument. Those bindings are used when an injector is created. which means, passing routerInjectables here basically makes all the bindings application-wide available..

   Bootstrap 

export bootstrap(appComponentType: Type, customProviders?: Array<any /*Type | Provider | any[]*/>) : Promise<ComponentRef<any>>

< 동 작 과 정 >

1. It uses the component's selector property to locate the DOM element which needs to be upgraded into the angular component.
부트스트랩은 앵귤러 컴포넌트로 업데이트할 필요가 있는 DOM element를 찾기 위해 Selector속성을 이용한다.

2.    It creates a new child injector (from the platform injector). Optionally, you can also override the injector configuration for an app by invoking bootstrap with the componentInjectableBindings argument.
부트스트랩은 (platform injector로부터) child injector를 생성한다. componentInjectableBindings로 부트스트랩을 호출하여 응용 프로그램에 대한 인젝터 구성을 Overriding할 수있다.

3.    It creates a new Zone and connects it to the angular application's change detection domain instance.
새로운 Zone을 만들고 변화 검출 도메인 인스턴스에 연결한다.

4.    It creates an emulated or shadow DOM on the selected component's host element and loads the template into it.
선택한 컴포넌트에 에뮬레이트 또는 shadow DOM 을 만들고 그것에 템플릿을 로드한다.

5.    It instantiates the specified component.
지정된 컴포넌트를 인스턴스화 한다.

6.    Finally, Angular performs change detection to apply the initial data providers for the application.

마지막으로, 앵귤러는 응용프로그램을 위한 initial data providers를 적용을 탐지하여 변경을 수행한다.