Skip to content

Modules

Jump to bottom
elle510 edited this page Nov 30, 2016 · 3 revisions

Modules

Angular App는 모듈형으로 되어있고 Angular 모듈 또는 NgModules이라는 불리는 자체 모듈 시스템이 있습니다.

Angular 모듈은 분량이 많습니다. 그래서 이 페이지에서는 모듈을 소개하고. ADVENCED > Angular Modules (NgModule) 페이지에서 좀 더 깊게 다룩겠습니다.

모든 Angular App은 기존에 AppModule이라는 루트 모듈을 하나 이상 보유하고 있습니다.

루트 모듈은 작은 응용 프로그램에서는 한 개의 모듈로 구성될 수 있지만, 대부분의 응용 프로그램에는 응용 프로그램 도메인, 워크 플로우 또는 밀접한 관계의 기능 등을 기준으로 결합된 코드들이 각각 모듈로 구성되어 있다.

Angular 모듈이라 함은 루트나 기능 여부에 상관없이 @NgModule decorator를 가지고 있는 클래스입니다.

데코레이터라고 함은 JavaScript 클래스를 수정하는 함수입니다. Angular는 메타 데이터를 클래스에 첨부하는 데 사용되는 데코레이터가 많이 있으므로 클래스의 의미와 작동 방식을 알고 있어야 합니다. 웹의 데코레이터에 대해 자세히 알아보십시오.

NgModule은 모듈의 속성을 설명하는 단일 메타 데이터 객체를 가지고 있는 데코레이터 함수입니다. 가장 중요한 속성은 다음과 같습니다:

  • declarations - 뷰 클래스에 해당하는 모듈. Angular 에서는 components, directives, and pipes 세가지 뷰 클래스가 있습니다.

  • exports - 다른 모듈의 컴포넌트 템플릿에서 표시하고 사용할 수 있도록 하는 선언의 부분 집합.

  • imports - 다른 모듈에서 export된 클래스는 해당 모듈에서 컴포넌트 템플릿 선언이 필요합니다.

  • providers - Service의 생성자는 서비스를의 모든 전역 콜렉션으로 생성하여 App의 모든 부분에서 액세스 할 수 있게 합니다.

  • bootstrap - 루트 컴포넌트라 불리는 메인 어플리케이션 뷰는 다른 모든 App의 뷰를 관리합니다. 오직 루트 모듈 만이 부트스트랩의 속성을 설정 하여야 합니다.

Here의 간단한 루트 모듈:

app/app.module.ts
COPY CODE
import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
@NgModule({
  imports:      [ BrowserModule ],
  providers:    [ Logger ],
  declarations: [ AppComponent ],
  exports:      [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

위의 AppComponent의 Export는 어떻게 Export되는지 보여주기 위한 것입니다. 실제로 사용할 때에는 이 예제처럼 사용하지 않아도 됩니다. 루트 모듈은 다른 컴포넌트에서 루트모듈을 import 하지 않아도 되기때문에 아무것도 내보 낼 필요가 없습니다.

루트 모듈을 부트 스트랩하여 응용 프로그램을 시작하십시오. 개발하는 동안 AppModule에서 main.ts 파일로 부트 스트랩 할 수 필요가 있습니다.

app/main.ts
COPY CODE
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

####Angular modules vs. JavaScript modules The Angular module — @NgModule 로 데코레이트된 클래스 — 는 Angular의 가장 기본적인 기능입니다.

JavaScript는 JavaScript 객체의 컬렉션을 관리하기 위한 자체 모듈 시스템을 가지고 있지만 Angular의 모듈시스템과는 완전히 다른 점이 있습니다.

In JavaScript each file is a module and all objects defined in the file belong to that module. The module declares some objects to be public by marking them with the export key word. Other JavaScript modules use import statements to access public objects from other modules. JavaScript에서 각 파일은 모듈이며 파일에 정의된 모든 객체는 해당 모듈에 속합니다. 모듈은 일부 객체를 선언하기 위하여 public으로 표시하고 키워드를 export 합니다. 다른 JavaScript 모듈을 사용하기 위해 import문을 사용하여 다른 모듈의 공용 객체에 액세스합니다.

import { NgModule }     from '@angular/core';
import { AppComponent } from './app.component';

export class AppModule { }

Web상에서의 자바 스크립트 모듈 시스템에 대해 자세히 알아보십시오.

이 두가지는 서로 다른 보완적인 모듈입니다. 두가지 모두를 사용하여 앱을 작성하시기 바랍니다.

####Angular libraries Angular는 JavaScript 모듈의 컬렉션의 모음입니다. 당신의 이것들을 마치 라이브러리 모듈처럼 생각할 수 있습니다. 각 Angular Library의 이름은 @angular이란 접두어로 시작합니다.

npm 패키지 관리자를 사용하여 이들을 설치하고, JavaScript import문을 사용하여 그 중 일부를 가져와 사용합니다.

예를 들어 Angular의 Component 데코레이터를 @ angular / core 라이브러리에서 다음과 같이 가져옵니다.

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

JavaScript import 문을 사용하여 Angular 라이브러리에서 Angular 모듈을 가져옵니다.

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

In the example of the simple root module above, the application module needs material from within that BrowserModule. To access that material, add it to the @NgModule metadata imports like this. 위의 간단한 root 모듈 예제에서 애플리케이션 모듈은 해당 BrowserModule 내부의 내용을 필요로 합니다. 해당 자료에 액세스하려면 @NgModule의 메타 데이터에 import를 추가하십시오.

imports:      [ BrowserModule ],

이러한 방법으로 Angular와 JavaScript 모듈 시스템을 함께 사용할 수 있습니다.

두 시스템은 "imports"와 "exports"라는 공통 명령어를 사용하기 때문에 혼동하기 쉽습니다. 이러한 혼동스러운 문제는 시간과 경험을 통해서만 해결이 가능합니다.

Angular Module 페이지에서 자세하기 알아보시기 바랍니다.

Clone this wiki locally