Detailed introduction of angular2 NgModel module

This article brings you a detailed introduction to the angular2 NgModel module. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

angular2 NgModel module

In Angular2 a Module refers to a class decorated with @NgModule. @NgModule uses a metadata object to tell Angular how to compile and run the code. A module can contain components, instructions, and pipes internally, and their access rights can be declared as public so that components of external modules can access and use them. We can also extend the functionality of our application by defining submodules.

NgModule’s API

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

Commonly used API introduction

The main attributes of NgModule are as follows:

declarations: list of Components/Directives/Pipes inside the module, declarations Take a look at the internal members of this module and declare them before you can use the corresponding components.

providers: Specify the services that need to be used at the root level of the application. (There is no module-level service in Angular2, and all Providers declared in NgModule are registered in the root-level Dependency Injector)

imports: Import other modules, and the Components, Directives, and Pipes exposed by other modules etc. can be used in components of this module. For example, after importing CommonModule, you can use NgIf, NgFor and other instructions.

exports: Used to control which internal members are exposed to external use. Importing a module does not mean that the public members exposed by the imported module within the module will be automatically imported. Unless the imported module writes its internally imported module into exports.

bootstrap: Usually the root component for app startup, usually there is only one component. Components in bootstrap will automatically be placed into entryComponents.

entryCompoenents: Components that will not be referenced in the template. This attribute is generally only used by ng itself, usually the bootstrap component or routing component. ng will automatically put the bootstrap and routing components into it. This attribute will not be used unless the component is dynamically added to the dom without routing.

Submodule

As the program grows, a single root module can no longer clearly divide responsibilities. At this time, Feature Module can be introduced. Feature Modules are created in the same way as root modules, and all modules share a runtime context and dependency injector.

The main differences between the responsibilities of the functional module and the root module are the following two points:

The purpose of the root module is to start the app, and the purpose of the functional module is to extend the app

The functional module can Expose or hide specific implementations as needed

Another module-related technology provided by Angular2 is lazy loading. By default, Angular2 packages all code into one file in order to improve the smoothness of the application. However, if it is an app running in a mobile, loading a large file may be too slow, so rc5 provides a lazy loading method. .

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

Among them, path specifies the path, loadChildren specifies the use of lazy loading, 'app/crisis/crisis.module#CrisisModule' specifies the path of the module, and the name of the module.

【Related recommendations: angular video tutorial】

The above is the detailed content of Detailed introduction of angular2 NgModel module. For more information, please follow other related articles on the PHP Chinese website!