[Angular] Module

└── angular/
    ├── app.module.ts
    ├── app.component.ts
    ├── app.component.html
    ├── app.component.scss
    └── app.component.spec.ts

NgModule(Module)

NgModule은 Angular에서 가장 중요한 구성 요소로 관련 있는 다른 요소를 묶는 역할을 한다. 
NgModule에는 사용할 컴포넌트나 서비스 프로바이더 등이 포함할 수 있으며, 외부로 공개(공유)할 지 아니면 다른 곳에서 해당 NgModule로 가져와 사용할 지 등을 정할 수 있다.
모든 Angular 프로젝트에는 반드시 하나 이상의 모듈이 존재하며, 그 중 보통 AppModule (app.module.ts)이 단 하나의 최상위 모듈이다

app.module.ts

최상위(루트) 모듈이며, 처음 실행할 때 같이 실행되는 모듈이다.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'

import { AppRoutingModule } from './app-routing.module' // routing 설치 시 생성
import { AppComponent } from './app.component'

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule, 
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

@NgModule({
  // Static, that is compiler configuration
  declarations: [], // Configure the selectors
  entryComponents: [], // Generate the host factory

  // Runtime, or injector configuration
  providers: [], // Runtime injector configuration

  // Composability / Grouping
  imports: [], // composing NgModules together
  exports: [] // making NgModules available to other parts of the app
})

• declarations : 컴포넌트를 사용하기 위해서 선언하는 곳 (단, 컴포넌트가 여러 모듈에 선언될 수는 없다. 단 하나의 모듈에만 선언 가능)
  -해당 모듈에 속한 구성 요소를 알려준다.
  -구성요소, 지시문 및 파이프
  -선언자는 정확히 하나의 모듈에 속해야 합니다. 둘 이상의 모듈에서 동일한 클래스를 선언하려고 하면 컴파일러에서 오류가 발생합니다.
  -선언자는 하나의 모듈에만 속할 수 있으므로 하나의 모듈에서만 선언하십시오 . 다른 곳에서 필요할 때 필요한 선언이 있는 모듈을 가져오세요.
  -이러한 선언된 클래스는 모듈 내에서 볼 수 있지만 이 모듈에서 내보내고 다른 모듈에서 이 클래스를 가져오지 않는 한 다른 모듈의 구성 요소에는 표시되지 않습니다.

• imports : 해당 모듈에서 사용할 외부 module

• exports : 외부 모듈에서 사용되어질 component (module 이 아니라 component 를 넣어줘야 한다!)

• providers: 제공자 배열은 애플리케이션에 필요한 서비스를 나열하는 곳입니다. 여기에 서비스를 나열하면 앱 전체에서 사용할 수 있습니다. 기능 모듈 및 지연 로딩을 사용할 때 범위를 지정할 수 있습니다.

• bootstrap( entryComponent ) : 해당 모듈이 시작되었을 때 우선적으로 실행될 컴포넌트를 지정한다. (기본은 AppComponent)
  -어플리케이션은 AppModule 이라는 root 를 bootstrapping 을 통해서 실행시킨다. bootstrapping 과정에서 bootstrap array 에 정의된 component 들을 생성하고 browser DOM 에 넣는다.

[ng modules] https://angular.io/guide/ngmodules

---

Component

AppComponent를 보면 네 개의 파일이 존재한다.

app.component.ts
app.component.html
app.component.scss
app.component.spec.ts (test file)

// app.component.ts
import { Component } from '@angular/core'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  title = 'rxjs-angular' // 처음에 설정한 프로젝트명이 title의 기본값으로 설정
  // 컴포넌트 클래스 영역
}

@Component 데코레이터에는 메타데이터 객체를 인자로 전달하며, 컴포넌트 생성에 필요한 정보를 담고 있다.

selector: HTML 템플릿의 이름이며, 상단 예시의 경우 다른 템플릿에서 <app-root></app-root> 으로 import 할 수 있다.
templateUrl: 해당 컴포넌트의 HTML 템플릿과 매핑한다.
styleUrls: 해당 컴포넌트의 스타일 파일과 매핑한다.

---

파이프

- 문자열, 통화, 일자와 같은 데이터를 원하는 형태로 화면에 표시할 수 있다.
- 어떤 값을 입력 받아서 변환된 데이터를 반환하는 함수이다.

• DatePipe: 날짜 데이터를 원하는 형식으로 변환합니다.
• UpperCasePipe: 문자열을 모두 대문자로 변환합니다.

{{ birthday | date | uppercase }} // FEB 4, 2000

• LowerCasePipe: 문자열을 모두 소문자로 변환합니다.
• CurrencyPipe: 숫자를 통화 단위로 변환합니다. 지역에 맞는 표시 형식도 적용할 수 있습니다.
• DecimalPipe: 숫자가 표시되는 자릿수를 지정합니다. 지역에 맞는 표시 형식도 적용할 수 있습니다.
• PercentPipe: 숫자를 백분율로 변환합니다. 지역에 맞는 표시 형식도 적용할 수 있습니다.

데코레이터란?

이미 정의된 함수의 앞 뒤에서 꾸며주는 역할을 수행
[데코레이터](https://bluese05.tistory.com/30)

BrowserMoule

웹 브라우저에서 Angular2 어플리케이션을 수행하기 위해 필요한 상호작용에 관한 기법들을 제공

class -- implements OnInit

OnInit??

차이점은 무엇인가
ES6의 constructor메소드 (여기서는 타입스크립트)는 Angular의 기능이 아니라 클래스 자체의 기능이다. constructor가 호출되는 시점은 Angular의 제어 바깥에 있다. 즉, Angular가 컴포넌트를 초기화 했는지 알기에는 적합하지 않은 위치다.

constructor를 살펴보자.

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

@Component({})
class ExampleComponent {
// 이 부분은 Angular가 아닌
// 자바스크립트에서 실행
constructor() {
console.log('Constructor initialised');
}
}

// 생성자(constructor)를 내부적으로 호출
new ExampleComponent();
constructor를 호출하는 주체가 Angular가 아닌 자바스크립트 엔진이라는 점이 중요하다. 그런 이유로 ngOnInit(AngularJS에서는 $onInit) 생애주기 훅이 만들어졌다.

생애주기 훅을 추가하면서 Angular는 컴포넌트가 생성된 후에 설정을 마무리하기 위한 메소드를 한 차례 실행할 수 있게 되었다. 이름에서 알 수 있는 것처럼 컴포넌트의 생애주기를 다루는데 사용한다.

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

@Component({})
class ExampleComponent implements OnInit {
constructor() {}

// Angular에서 필요에 맞게 호출
ngOnInit() {
console.log('ngOnInit fired');
}
}

const instance = new ExampleComponent();

// 필요할 때 Angular에서 호출
instance.ngOnInit();

ngOnInit

ngOnInit
ngOnInit은 순수하게 Angular가 컴포넌트 초기화를 완료했다는 점을 전달하기 위해 존재한다.

---

Directive

Angular가 제공하는 디렉티브는 크게 어트리뷰트 디렉티브(Attribute Directive)와 구조 디렉티브(Structural Directive)로 나뉜다.

디렉티브는 DOM의 모든 것을 직접 관리할 수 있다. HTML 요소 또는 어트리뷰트의 형태로 사용하여 디렉티브가 사용된 요소에게 무언가를 하라는 지시(directive)를 전달한다. 디렉티브는 프로젝트 전역에서 사용할 수 있는 공통 관심사를 컴포넌트에서 분리한 것으로 구현하여 컴포넌트의 복잡도를 낮추고 가독성을 향상시킨다.

어트리뷰트 디렉티브
NgClass: CSS 클래스 추가/제거
NgStyle: HTML 스타일 추가/제거
NgModel: HTML 폼 요소에 양방향 데이터 바인딩 추가
구조 디렉티브
NgIf: 조건에 따라 DOM에 추가/제거
NgFor: 배열 항목마다 DOM에 추가
NgSwitch: 조건에 맞는 것을 선택해서 DOM에 추가

---

[angular] https://www.howdy-mj.me/angular/angular-structure