NGM 모듈 소개

니비타 마란 | 내셔널 형태 | 2020년 9월
이 블로그에서는 대형 각도 응용 프로그램을 만들 때 가장 중요한 개념 중 하나인'NgModules'에 대한 소개를 볼 수 있습니다.
참고: NgModules는 매우 광범위한 주제로 다음과 같은 구체적인 소개 개념을 소개합니다. -

NGM 모듈이란 무엇입니까?

어떻게 각도 응용에서 모듈을 만듭니까?

NgModules의 메타데이터

NgModules란 무엇입니까?

NgModules의 주요 목적은 단일 모듈 파일에서 보기(예를 들어 구성 요소, 명령)와 데이터 공급자(예를 들어 서비스) 간의 복잡한 관계를 구성하는 것이다. 이 파일은 응용 프로그램의 특정한 기능(예를 들어 로그인 기능)을 정의한다.이것은 실제적으로 개발자가 모든 파일에서 각각 설명하는 것이 아니라 하나의 파일에서 구성 요소와 서비스 간의 관계를 정의하는 데 도움이 된다.
NGM 모듈을 사용하면 다음과 같은 이점을 얻을 수 있습니다.

초기 로드에 사용되지 않은 특정 모듈의 로드를 지연시킬 수 있으므로 성능이 향상됩니다.

또한 우리는 루트 보호를 사용하여 누가 우리 프로그램의 어떤 모듈에 접근할 수 있는지 제어할 수 있다.

어떤 더 큰 범위의 각도에서 응용하더라도 많은 특성이 나타나기 때문에 응용 유형이 복잡해진다.NgModules는 별도의 모듈로 그룹화하는 솔루션을 제공합니다.우리는 아래의 장과 절에서 그것이 어떻게 완성되었는지 볼 것이다.

NGM 모듈은 어떻게 만듭니까?

다음 코드 세션과 같이

우선'@angular/core'에서'NgModules'를 가져옵니다.

가져오면 decorator는 이 특정 모듈에 사용되는 모든 구성 요소와 서비스를 설명할 수 있습니다.

마지막으로 저희는'export'키워드 내보내기 모듈을 사용할 것입니다. 이 키워드는 다른 모듈에서 사용할 수 있습니다.

import { NgModule } from ‘@angular/core’;
@NgModule({
})
export class AppModule{}

모든 각도에서 적용할 때 우리는 다음과 같은 네 가지 부분, 즉 구성 요소, 서비스, 파이프와 명령을 가지고 있다.

다음 그림과 같이 NgModules를 사용하여 관련 어셈블리, 파이프 및 명령을 선언, 가져오기 및 내보내기에 그룹화합니다.서비스는 공급업체에서 제공합니다.

NGM 모듈의 메타데이터:

이제 NgModule을 생성할 때 사용할 수 있는 다양한 속성을 볼 수 있습니다.다음과 같은 다섯 가지 주요 속성이 있습니다.

주장

수출

수입

부팅

공급업체

1. 선언:

첫 번째 속성은 성명이라고 하는데, 우리는 그 중에서 특정 기능이 사용할 수 있는 모든 구성 요소, 지령, 파이프를 성명할 것이다.그것은 보기에 다음과 같다.

                     declarations : [
                         Components,
                         Directives,
                         Pipes
                      ]

2. 출구:

모듈 B가 모듈 A를 가져올 때 다른 모듈에서 사용할 수 있도록 모듈 A를 내보내야 합니다.모듈 A를 내보내면 가져온 모든 모듈에서 모듈 A의 모든 구성 요소, 명령어, 서비스 또는 파이프를 사용할 수 있습니다.
이것은 대상을 대상으로 프로그래밍하는 개념을 바탕으로 하는 것이다. 구성 요소, 지령, 파이프는 기본적으로 개인적인 것이기 때문에 다른 모듈에서 사용할 수 있도록 내보내기 모듈에 추가해야 한다.그것은 보기에 다음과 같다.

                       exports : [
                          PublicComponents,
                          PublicDirectives,
                          PublicPipes
                        ]

3. 수입:

따라서 다른 모듈에서 내보낸 모든 구성 요소와 파이프는 NgModule의 가져오기 부분에 대한 설명을 통해 하나의 모듈로 가져올 수 있습니다.

                       imports : [
                            ModuleA,
                            ModuleB,
                            ModuleC
                         ]

4. 부트:

그리고bootstrap 속성에서, 이 구성 요소를 호출해서 루트 구성 요소를 설명합니다. 이 구성 요소는 프로그램을 처음 불러오는 데 사용됩니다.일반적으로 프로그램 구성 요소는 모든 각도에서 프로그램에서 설명하는 기본 구성 요소입니다.

                         bootstrap : [
                             RootComponent
                          ]

5. 공급업체:

마지막으로providers 속성에서 우리는 모든 데이터 제공자, 예를 들어 서비스와 신분 검증 위사를 제공했다.따라서 이 서비스들은 성명된 모듈과 이 특정 모듈을 가져온 모든 모듈에서 사용할 수 있다.

                       providers : [
                           Services,
                           Guards
                        ]

따라서 이것은 우리가 NgModule에서 설명할 수 있는 각종 속성이며, NgModule를 사용하여 특정 기능을 쉽게 실현하는 데 필요한 각종 구성 요소, 서비스, 파이프 간의 관계를 정의한다.
NgModule의 예는 다음과 같습니다.

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

모듈 사용 시 고려해야 할 사항:

기본적으로 서비스는'제공'또는 루트 모듈에 추가되기 때문에 응용 프로그램의 모든 코드에서 서비스를 사용할 수 있습니다.

서비스는 특정 모듈에서 제공할 수 있지만 @Injectable decorator의'providedIn'속성에서 지정해야 합니다.
루트를 연결 위치로 사용하지 않을 때, 우리는 복잡한 순환 의존 관계에 주의해야 한다.구성 요소 주입 서비스도 같은 모듈에서 제공되기 때문에 이 문제를 초래할 수 있습니다.

요약:

한 마디로 하면, 우선, 우리는 NgModules가 무엇인지, 그리고 그것을 어떻게 사용해서 보기 (예: 구성 요소, 명령) 와 특정 응용 프로그램의 데이터 공급자 간의 복잡한 관계를 구성하는지 이해했다.그리고 우리는 장식기를 사용하여 NgModule을 만드는 방법을 이해했다.우리는 마침내 가져오기, 내보내기, 성명, 안내, 공급자 등 NgModule의 각종 속성을 보았다.나는 이것이 매우 광범위한 화제라는 것을 알고 있으며, 블로그에서 포괄할 수 있지만, 당신이 NgModules의 기본 개념을 이해할 수 있기를 바랍니다.

뮤지컬이 곧 옵니다.

ng conf: 뮤지컬은 2021년 4월 22일과 23일 이틀간 회의를 연다.ng-conf.org로 문의하십시오.

빌 에페리와 스티븐 기타에게 고맙소.