NgModule/Angular 공부회 #2

5440 단어 AngularTypeScript

NgModule 정보


  • Angular는 NgModule 라고 불리는 모듈 시스템에 의해 모듈화되고 있다
  • 비슷한 기능을 모듈화하고 결합하는 것이 가장 좋은 방법입니다.
  • 다른 모듈을 가져오거나 다른 모듈에 게시하는 기능을 내보낼 수 있습니다.

  • 모든 Angular 앱에는 AppModule라는 루트 모듈이 있습니다.
  • app.module.ts라는 이름으로 정의됩니다



    • NgModule 메타데이터


  • 다른 Angular의 요소와 마찬가지로 ＠NgModule 데코레이터에 의해 정의되며 몇 가지 메타 데이터
  • declarations : 모듈에 속하는 View 요소( component 등)
  • exports : declarations 중 다른 모듈에 공개할 수 있는 것
  • providers : 이 NgModule가 공개하는 서비스를 제공하는 클래스군
  • bootstrap : 기동시에 표시한다 component (루트 컴퍼넌트)를 지정한다

    • 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 { }

    ES2015 모듈 및 NgModule


  • ES2015 모듈과 NgModule는 완전히 다른 개념
  • ES2015 모듈에서 "다른 하나의 파일 가져 오기"가 모듈이고 여러 파일을 모은 모듈은 없습니다.
  • NgModule는 ES2015보다 더 큰 덩어리를 모듈화하고 있다고 말할 수 있다.

    - 당연히 내부적으로 ES2015 모듈이 활용되고 있다




    • NgModule 지연로드


    NgModule 의 임포트는 일반적으로 컴파일시에 해결된다. 즉, 생성된 index.js 파일에 모든 가져온 모듈이 포함됩니다. 그러나 이것에는 index.js가 비대화되어 초기 로드 시간이 길어져 버린다는 단점도 있다.

    따라서 특정 경로로 전환 할 때 처음으로로드되는 방식으로 초기 가져온 모듈의 팽창을 방지 할 수 있습니다.
    export const routes: Routes = [
  { path: '', redirectTo: 'contact', pathMatch: 'full'},
  { path: 'items', loadChildren: () => import('./items/items.module').then(m => m.ItemsModule) },
  { path: 'customers', loadChildren: () => import('./customers/customers.module').then(m => m.CustomersModule) }
];

    실제 모듈을 살펴보자


  • Demo: h tps // s ckb t ... m / 앙구 r / k

    • Angular에서 swiper를 사용하려고했지만 망설이는 이야기
    Firestore에서 특정 필드의 값을 가져오는 가장 쉬운 방법(Angular)

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage