Angle2 NgModel 모듈에 대한 자세한 소개

이 기사는 angle2 NgModel 모듈에 대한 자세한 소개를 제공합니다. 이는 특정 참조 가치가 있습니다. 도움이 필요한 친구가 도움이 되기를 바랍니다.

angular2 NgModel Module

In Angular2 모듈은 @NgModule로 장식된 클래스를 말합니다. @NgModule은 메타데이터 객체를 사용하여 Angular에 코드 컴파일 및 실행 방법을 알려줍니다. 모듈은 내부적으로 컴포넌트, 명령어, 파이프를 포함할 수 있으며, 이들의 접근 권한을 공개로 선언하여 외부 모듈의 컴포넌트가 접근하여 사용할 수 있도록 할 수 있습니다. 또한 하위 모듈을 정의하여 애플리케이션의 기능을 확장할 수도 있습니다.

NgModule API

interface NgModule {
     // providers: 这个选项是一个数组,需要我们列出我们这个模块的一些需要共用的服务
     //            然后我们就可以在这个模块的各个组件中通过依赖注入使用了.
    providers : Provider[]
     // declarations: 数组类型的选项, 用来声明属于这个模块的指令,管道等等.
     //               然后我们就可以在这个模块中使用它们了.
    declarations : Array<type>|any[]>
     // imports: 数组类型的选项,我们的模块需要依赖的一些其他的模块,这样做的目的使我们这个模块
     //          可以直接使用别的模块提供的一些指令,组件等等.
    imports : Array<type>|ModuleWithProviders|any[]>
     // exports: 数组类型的选项,我们这个模块需要导出的一些组件,指令,模块等;
     //          如果别的模块导入了我们这个模块,
     //          那么别的模块就可以直接使用我们在这里导出的组件,指令模块等.
    exports : Array<type>|any[]>
    // entryComponents: 数组类型的选项,指定一系列的组件,这些组件将会在这个模块定义的时候进行编译
    //                  Angular会为每一个组件创建一个ComponentFactory然后把它存储在ComponentFactoryResolver
    entryComponents : Array<type>|any[]>
    // bootstrap: 数组类型选项, 指定了这个模块启动的时候应该启动的组件.当然这些组件会被自动的加入到entryComponents中去
    bootstrap : Array<type>|any[]>
    // schemas: 不属于Angular的组件或者指令的元素或者属性都需要在这里进行声明.
    schemas : Array<schemametadata>
    // id: 字符串类型的选项,模块的隐藏ID,它可以是一个名字或者一个路径;用来在getModuleFactory区别模块,如果这个属性是undefined
    //     那么这个模块将不会被注册.
    id : string
 }</schemametadata></type></type></type></type></type>

일반적으로 사용되는 API 소개

NgModule의 주요 속성은 다음과 같습니다.

선언: 모듈의 내부 구성 요소/지시문/파이프 목록은 이후에만 선언됩니다. 선언은 해당 구성 요소를 사용할 수 있습니다.

providers: 애플리케이션의 루트 수준에서 사용해야 하는 서비스를 지정합니다. (Angular2에는 모듈 수준의 서비스가 없으며 NgModule에 선언된 모든 Provider는 루트 수준의 종속성 주입기에 등록됩니다.)

imports: 다른 모듈을 가져오며, 다른 모듈에서 노출되는 구성 요소, 지시문, 파이프 등을 가져올 수 있습니다. 여기에서 가져올 수 있습니다. 모듈 구성 요소에 사용됩니다. 예를 들어 CommonModule을 가져온 후 NgIf, NgFor 및 기타 지침을 사용할 수 있습니다.

내보내기: 외부 사용에 노출되는 내부 구성원을 제어하는 ​​데 사용됩니다. 모듈을 가져오는 것은 모듈 내에서 가져온 모듈에 의해 노출된 공용 멤버를 자동으로 가져오는 것을 의미하지 않습니다. 가져온 모듈이 내부적으로 가져온 모듈을 내보내기에 쓰지 않는 한.

bootstrap: 일반적으로 앱 시작을 위한 루트 구성 요소이며 일반적으로 구성 요소가 하나만 있습니다. 부트스트랩의 구성 요소는 자동으로 EntryComponents에 배치됩니다.

entryCompoenents: 템플릿에서 참조되지 않는 구성 요소입니다. 이 속성은 일반적으로 ng 자체에서만 사용되며 일반적으로 부트스트랩 구성 요소 또는 라우팅 구성 요소는 자동으로 부트스트랩 및 라우팅 구성 요소를 넣습니다. 라우팅 없이 구성요소가 DOM에 동적으로 추가되지 않는 한 이 속성은 사용되지 않습니다.

Sub-module

프로그램이 성장함에 따라 단일 루트 모듈로는 더 이상 책임을 명확하게 나눌 수 없습니다. 이때 Feature Module을 도입할 수 있습니다. 기능 모듈은 루트 모듈과 동일한 방식으로 생성되며 모든 모듈은 런타임 컨텍스트와 종속성 주입기를 공유합니다.

기능 모듈과 루트 모듈의 책임의 주요 차이점은 다음 두 가지입니다.

루트 모듈의 목적은 앱을 시작하는 것이고 기능 모듈의 목적은 앱을 확장하는 것입니다

기능적 모듈 모듈은 필요에 따라 특정 구현을 노출하거나 숨길 수 있습니다

Angular2는 또 다른 모듈 관련 기술인 지연 로딩을 제공합니다. 기본적으로 Angular2는 애플리케이션의 원활함을 높이기 위해 모든 코드를 하나의 파일로 패키징합니다. 그러나 모바일에서 실행되는 앱의 경우 큰 파일을 로드하는 것이 너무 느릴 수 있으므로 rc5는 지연 로딩 방법을 제공합니다.

import { ModuleWithProviders }  from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

export const routes: Routes = [
  { path: '', redirectTo: 'contact', pathMatch: 'full'},
  { path: 'crisis', loadChildren: 'app/crisis/crisis.module#CrisisModule' }, // 可以延迟加载子模块，子模块的结构和父模块一样，它会去加载子模块中的Routes配置，并跳转对应的组件中去。
  { path: 'heroes', loadChildren: 'app/hero/hero.module#HeroModule' }
];

export const routing: ModuleWithProviders = RouterModule.forRoot(routes);

그 중 path는 경로를 지정하고, loadChildren은 지연 로딩 사용을 지정하며, 'app/crisis/crisis.module#CrisisModule'은 모듈의 경로와 모듈 이름을 지정합니다.

【관련 추천: 각도 영상 튜토리얼】

위 내용은 Angle2 NgModel 모듈에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!