GolDeeper

모든 어플리케이션은 간단한 작업을로 시작합니다: 데이터를 받고, 변형시키고, 사용자에게 보여주는 기능입니다.

얻은 데이터는 생성하기 간편한 지역변수 이거나 스트리밍하는 복잡한 데이터로 웹 소캣 위 에서 가능합니다.

data가 도착하면, 그 값을 곧바로 view에 직접 toString 값으로  넣을 수 있는데, 드물지만 이러한 작업은 가끔 좋은 UX를 제공하곤합니다.

예를 들자면, 대부분의 사용 방법으로, 

사용자가 날짜를 April 16, 1988과 같은 간단한 양식을 

Fri Apr 15 1988 00:00:00 GMT-0700 (Pacific Daylight Time) 처럼 보길 좋아하지 않습니다.

많은 어플리케이션을 반복적으로 같은 변경을 적용할 경우에 사용할 수 있습니다.
이러한 작업을 스타일처럼  사용할 수 있습니다. 실제로, HTML 템플릿으로 style처럼 사용할 수 있습니다.

앵귤러 pipe를 소개하자면, display-value를 변경시켜 쓰는 방식으로 HTML에 선언하여 사용할 수 있습니다.

live example / download example 으로 실행해 볼 수 있으며, Stackblitz나 download를 할 수 있습니다.

사용 하기

import { Component } from '@angular/core';

@Component({
  selector: 'app-hero-birthday',
  template: `<p>The hero's birthday is {{ birthday | date }}</p>`
})
export class HeroBirthdayComponent {
  birthday = new Date(1988, 3, 15); // April 15, 1988
}

컴포넌트의 템플릿에 주목해 보겠습니다.

<p>The hero's birthday is {{ birthday | date }}</p>

{{ }} 표현 안쪽을 보면, 컴포넌트의 birthday 값이 pipe 연산자 ( | )를 통해 오른쪽에 있는 Date pipe 함수로 흘러갑니다.

모든 pipe는 이러한 방식으로 작동합니다.

제공하는(built-in) pipe

앵귤러는  DatePipe, UpperCasePipe, LowerCasePipe, CurrencyPipe, 그리고 PercentPipe 와 같은 파이프를 갖고 있습니다.

모두 어떤 템플릿에서든지 사용 가능합니다.

NgModules

기본적으로 아래 두 개념을 알아두셔야 합니다.

• Bootstrapping.
• JavaScript Modules vs. NgModules.

NgModules 은 주입기(injector)와 컴파일러로 구성며, 관련있는 것들을 조직화 하는것을 돕습니다.

NgModule은 @NgModule 데코레이터로 마킹된 하나의 클래스 입니다. 

@NgModule은 런타임에 주입기를 어떻게 생성하고, 컴포넌트의 템플릿을 어떻게 컴파일 할지 기술하는  메타데이터 객체를 갖습니다. 

이것은 모듈이 소유한 컴포넌트, Directives(HTML의 속성으로 확장된 ng-app), pipes( {{value | pipe_function}} ), exports 속성을 통해서 일부를 public으로 만들어 , 외부 컴포넌트가 사용할 수 있도록 합니다.

물론 @NgModule를 사용하여 어플리케이션 의존성 주입기에 service provider로 추가할 수 있습니다.

예제로 pages cover에 관련된 NgModuels의 모든 기술들을 보여줍니다. live example / download example 를 참고하세요.

각 기술에 대한 설명은, 아래 있는 NgModules 섹션을 눌러 참고하세요.

Angular modularity (앵귤러 모듈화 링크)

모듈은 외부 라이브러리로부터의 확장과 어플리케이션 조직화하기에 훌륭한 방법입니다.

앵귤러 라이브러리는 NgModule이고,  FormsModule, HttpClientModule, 그리고 RouterModule 를 예로 들 수 있습니다.

많은 third-party 라리브러리는 NgModule로써 사용가능합니다 예를 들어  Material Design, Ionic, 와 AngularFire2가 있습니다.

NgModule은 컴포넌트, directive, 그리고 재사용 가능한 기능 단위의 pipe, 비지니스 도메인 어플리케이션, *workflow 또는 유틸의 common collection을 하나로 병합해 놓았습니다.

*workflow
workflow는 extensibleService를 확장합니다. 

말인 즉슨 모든 workflow는 extensibleService로부터 제공하는 method와 속성을 상속합니다.

확장은 자기만의 step을 추가하거나, 존재하는 step을 제거하거나, custom 데이터를 조작하는 로직을 주입할 수 있도록 허용합니다.

또한 모듈은 어플리케이션에 service를 추가할 수 있습니다. 

내부적으로 개발자가 스스로 개발 한 것이나 외부의 소스로써 Angular router 나 HTTP client같은것도 추가할 수 있습니다.

모듈은 어플리케이션이 시작될 때  router(라우터)에 의해 eagerly로 로딩되거나 비동기(asynchronously)한 lazy 로딩을 합니다. 

NgModule 메타데이터는 다음과 같습니다 :

• 모듈에 포함된 컴포넌트, directiv, pipe를 선언합니다.
• 다른 모듈의 컴포넌트 템플릿이 사용할 수 있도록 컴포넌트, directive, pipe를 public으로 만듭니다.
• 컴포넌트, directive, pipe를 갖는 다른 모듈을 임포트합니다.
• 다른 어플리케이션 컴포넌트가 사용할 수 있도록 service를 제공합니다.

// imports
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { ItemDirective } from './item.directive';


// @NgModule decorator with its metadata
@NgModule({
  declarations: [
    AppComponent,
    ItemDirective
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

가장 위에 있는 임포트 문에서. 그 다음 섹션은 어디에 @Ngmodule가 어떤 컴포넌트와 directive가 속해져있는지 명세하고 이것(선언)으로 다른 모듈이 사용하기 쉽도록 합니다(imports). 이 페이지는  Bootstrapping은 NgModule의 구성을 포함하여 빌딩되었습니다. 만약 @NgModule의 구성에 대해 더 알고 싶다면,  Bootstrapping을 읽어보세요.