반응형

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

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

import { FormsModule } from '@angular/forms'; // <-- NgModel lives here


import { AppComponent } from './app.component';

import { HeroesComponent } from './heroes/heroes.component';

import { HeroDetailComponent } from './hero-detail/hero-detail.component';

import { HeroService } from './hero.service';

import { MessagesComponent } from './messages/messages.component';

import { MessageService } from './message.service';

import { AppRoutingModule } from './/app-routing.module';

import { DashboardComponent } from './dashboard/dashboard.component';



@NgModule({

  declarations: [

    AppComponent,

    HeroesComponent,

    HeroDetailComponent,

    MessagesComponent,

    DashboardComponent

  ],

  imports: [

    BrowserModule,

    FormsModule,

    AppRoutingModule

  ],

  providers: [HeroService, MessageService],

  bootstrap: [AppComponent]

})

export class AppModule { }


모듈은 특정 업무를 위해 각 기능들을 묶어놓은 라이브러리이며 모듈이 여러게일수도 있고 root 모듈은 실행시 필요하므로 반드시  필요하다.

모듈은 사용되는 컴포넌트, 서비스, 디렉티브, 주입되는 서비스들을 정의 하는 것이다. 

@NgModule 애노테이션을 통해 정의하며 declarations, imports, providers, bootstrap을 배열로 정의한다.

declarations은 모듈에서 사용할 콤포넌트를 선언한다.

bootstrap로 지정된 콤포넌트가 root 콤포넌트로 지정된다.

providers은 서비스를 주입할때 사용한다.


모듈 클래스 앞에 export  해야 외부에서 해당 모듈을 사용 할수 있다.

모듈에 exports 배열 속성을 이용해서 해당 다른 모듈에서 해당모듈을 임포트하고 콤포넌트을 사용 할수 있다.


반응형

+ Recent posts