Introduction détaillée du module Angular2 NgModel

Cet article vous apporte une introduction détaillée au module angulaire2 NgModel. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

module NgModel angulaire2

Dans Angular2 un Module fait référence à une classe décorée avec @NgModule. @NgModule utilise un objet de métadonnées pour indiquer à Angular comment compiler et exécuter le code. Un module peut contenir des composants, des instructions et des canaux en interne, et leurs droits d'accès peuvent être déclarés publics afin que les composants de modules externes puissent y accéder et les utiliser. Nous pouvons également étendre les fonctionnalités de notre application en définissant des sous-modules.

API NgModule

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

Introduction aux API courantes

Les principaux attributs de NgModule sont les suivants :

déclarations : une liste de composants/directives /Pipes à l'intérieur du module, déclarez les membres internes de ce module, et les composants correspondants ne peuvent être utilisés qu'après déclaration.

fournisseurs : spécifiez les services qui doivent être utilisés au niveau racine de l'application. (Il n'y a pas de service au niveau du module dans Angular2, et tous les fournisseurs déclarés dans NgModule sont enregistrés dans l'injecteur de dépendances au niveau racine)

importations : importez d'autres modules et les composants, directives et tuyaux exposés par d'autres les modules, etc. peuvent être utilisés dans les composants de ce module. Par exemple, après avoir importé CommonModule, vous pouvez utiliser NgIf, NgFor et d'autres instructions.

exports : Utilisé pour contrôler quels membres internes sont exposés à une utilisation externe. L'importation d'un module ne signifie pas que les membres publics exposés par le module importé au sein du module seront automatiquement importés. Sauf si le module importé écrit son module importé en interne dans les exportations.

bootstrap : généralement le composant racine pour le démarrage de l'application, il n'y a généralement qu'un seul composant. Les composants du bootstrap seront automatiquement placés dans EntryComponents.

entryCompoenents : Composants qui ne seront pas référencés dans le template. Cet attribut n'est généralement utilisé que par ng lui-même, généralement le composant d'amorçage ou le composant de routage y placera automatiquement les composants d'amorçage et de routage. Cet attribut ne sera utilisé que si le composant est ajouté dynamiquement au dom sans routage.

Sous-modules

À mesure que le programme se développe, un seul module racine ne peut plus diviser clairement les responsabilités. À ce stade, le module de fonctionnalités peut être introduit. Les modules de fonctionnalités sont créés de la même manière que les modules racine, et tous les modules partagent un contexte d'exécution et un injecteur de dépendances.

Les principales différences entre les responsabilités des modules fonctionnels et des modules racine sont les suivantes :

Le but du module racine est de démarrer l'application, et le but du module fonctionnel est d'étendre l'application

Le module fonctionnel peut exposer ou masquer des implémentations spécifiques selon les besoins

Une autre technologie liée au module fournie par Angular2 est le chargement paresseux. Par défaut, Angular2 regroupe tout le code dans un seul fichier afin d'améliorer la fluidité de l'application. Cependant, s'il s'agit d'une application exécutée sur un mobile, le chargement d'un fichier volumineux peut être trop lent, c'est pourquoi rc5 fournit une méthode de chargement lente.

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);

Parmi eux, path spécifie le chemin, loadChildren spécifie l'utilisation du chargement paresseux, 'app/crisis/crisis.module#CrisisModule' spécifie le chemin du module et le nom du module.

[Recommandations associées : Tutoriel vidéo angulaire]

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!