Angular engineering application module (module)

First, let's look at the definition of [Angular official website module] :

NgModules is used to configure injectors and compilers, and help you organize related things together.

NgModule is a class with @NgModule decorator. The parameter of @NgModule is a metadata object that describes how to compile the template of the component and how to create an injector at runtime. It will mark the module's own components, instructions, and pipelines, and expose some of them through the exports attribute so that external components can use them. NgModule can also add some service providers to the application's dependency injector.

• Angular modularity

1. Modules are the best way to organize applications and use external libraries to extend applications;
2. Angular's own libraries are all NgModules, such as FormsModule, HttpClientModule and RouterModule. Many third-party libraries are also NgModules, such as Material Design, Ionic, and AngularFire2.
3. NgModule packages components, instructions, and pipelines into cohesive functional blocks, with each module focusing on a feature area, business area, workflow, or general tool.
4. Modules can also add services to applications. These services may be internally developed (such as written by yourself), built-in frameworks (such as Angular routing and HTTP client), or external modules (Material Design, Ionic);
5. The module can be loaded acutely when the application starts, or it can be loaded asynchronously and lazily by the router;

• What can the elements of NgModule  do?

1. Declare that certain components, instructions, and pipelines belong to this module;
2. Expose some of the components, instructions and pipelines so that they can be used in component templates in other modules;
3. Import other modules with components, instructions and pipelines. The components in these modules are all required by this module;
4. Provide some services used by other components in the supply;

Every Angular application has at least one module, which is the root module. You can boot that module to start the application.

Why do you want to customize the module?

When we develop an application, a single function can be completed with only a small number of components. At this time, the root module needs to load these components together; but with the development of business, the corresponding transformation and growth of the application requires continuous Some of the refactored and remodeled components may be specific components, and they have closely related function sets. If these components are mounted in the root component in the original way, then the application will appear to be relatively It is messy, and the performance of the first loaded application is also reduced. The original method is not enough to reflect the advantages of the Angular framework engineering. At this time, we need to modularize the components to better reflect the Angular engineering practice.

Advantages of component modularization (relatively):

1. Project (medium and large) structure engineering is obvious, which is convenient for flexible expansion and structure reuse.
2. Lazy loading of sub-components can be dynamically implemented in the root component to improve application initialization performance and user experience;
3. There are closely related functional components that are more centralized or modularized, and the components are classified and merged to form a reasonable module;

Angular module classification:

 

How to create custom modules and implement lazy loading of routing modules in Angular projects?

• Create a folder named modules in the headerRout file through Angular directives, and create a module named user at the same time;

PS E:\Angular\headRout> ng g module modules/user

• Create the required sub-components under the user module. At this time, the components are imported under the root module of the sub-components by default;

PS E:\Angular\headRout> ng g component modules/user/components/nav

• Create a root component with a routing module;

PS E:\Angular\headRout> ng g component modules/user --routing 

•  Configure the root route in the user module;

/* 路由配置 */
const routes: Routes = [
  {path:'user',component: UserComponent} 
];

• Create the service in the module;

PS E:\Angular\headRout> ng g service modules/user/services/head

• Introduce services in the root module of the user module;

import { HeadService } from './services/head.service';

• How to use the components in the module in the project root component (including the root component and sub-components of the module);

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
 
//引入模块中的组件
import { UserComponent } from './user.component';
import { NavComponent } from './components/nav/nav.component';
//引入服务
import { HeadService } from './services/head.service';
 
@NgModule({
  //声明组件：User模块组件
  declarations: [ UserComponent, NavComponent],
  //暴露组件：将其他外部模块需要使用的组件用exports暴露出来，供外部其他组件使用
  exports:[UserComponent],
  //声明模块
  imports: [
    CommonModule
  ],
  //声明服务
  providers:[HeadService]
})
export class UserModule { }

• Introduce and declare the custom module in the project root module;

//引入自定义模块
import { UserModule } from './modules/user/user.module';
 
@NgModule({
  /* 声明组件 */
  declarations: [
    AppComponent,
    HeaderComponent,
    HomeComponent,
    MiaoshaComponent,
    CouponComponent
  ],
  /* 声明模块 */
  imports: [
    BrowserModule,
    AppRoutingModule,
    UserModule   //声明自定义模块
  ],
  /* 声明服务 */
  providers: [],
  /* 启动应用 */
  bootstrap: [AppComponent]
})
export class AppModule { }

• Mount the custom module in the html page of the root component;

<app-header></app-header>
<router-outlet></router-outlet>
<hr /><br />
//模块子组件挂载
<app-user></app-user>

• Root component routing module [app-routing.module.ts] realizes lazy loading of custom modules;

/* 配置路由 */
const routes: Routes = [
  {path:'user', loadChildren:'./modules/user.module#UserModule'}, /* 载入自定义模块，#UserModule是自定义模块的类名称 */
  {path:'', pathMatch:'full', redirectTo:'user'} /* 此处是配置默加载认模块，如果存在多个自定义模块 */
];

The above is the analysis of the entire process of custom modules in the Angular project.