Custom modules angular

The angular custom modules:

　　　　When the project is relatively large, the component very much, this time the need to function in the same sub-component modules loaded. Sub-module loaded with two major benefits:

　　　　1. Project a clear structure

　　　　2. load faster

A custom module angular directory structure divided into:

II. Create a custom module

　　Performing ng g module modules / user, generates user.module.ts

 
  import { NgModule } from '@angular/core'; 
 
  import { CommonModule } from '@angular/common'; 
 
  import { AddressComponent } from './components/address/address.component'; 
 
  import { UserComponent } from './user.component'; 
 
  import { OrderComponent } from './components/order/order.component'; 
 
  import { CommonService } from './services/common.service' 
 
  @ NgModule ({ 
 
    declarations: [AddressComponent, UserComponent, OrderComponent], 
 
    // export component of the module, do not export, it can not be used in other components of the module module 
 
    exports: [UserComponent, OrderComponent], 
 
    imports: [ 
 
      CommonModule 
 
    ], 
 
    providers: [CommonService] 
 
  }) 
 
  export class UserModule { }

III. Import Custom modules in other modules, after the introduction, custom module exposed (Exports) components can be used directly

 
  // imports custom module 
 
  import { UserModule } from './modules/user/user.module' 
 
  @NgModule({ 
 
    declarations: [ 
 
    ], 
 
    imports: [ 
 
      UserModule // 导入自定义模块 
 
    ], 
 
    providers: [], 
 
    bootstrap: [AppComponent] 
 
  }) 
 
  export class AppModule { }

通过路由动态加载自定义模块：

　　一. 在自定义模块中创建自己的路由文件，通过命令或者手动创建

　　　　ng g module modules/user --routing 会生成一个 user.routing.ts 的文件。user.routing.ts文件中配置路由。配置方式

　　和根组件中配置一致。也可以配置子路由，配置方式一致。

 
  import { UserComponent } from './user.component' 
 
  import { AddressComponent } from './components/address/address.component' 
 
  import { OrderComponent } from './components/order/order.component' 
 
  const routes: Routes = [ 
 
    { path: '', component: UserComponent }, 
 
    { path: 'order', component: OrderComponent }, 
 
    { path: 'address', component: AddressComponent } 
 
  ]; 
 
  @NgModule({ 
 
    imports: [RouterModule.forChild(routes)], 
 
    exports: [RouterModule] 
 
  }) 
 
  export class UserRoutingModule { }

　　二. 在user模块中引入 user.routing 。user.module.ts 中导入路由

 
  import { UserRoutingModule } from './user-routing.module' 
 
  import { UserComponent } from './user.component'; 
 
  import { AddressComponent } from './components/address/address.component'; 
 
  import { OrderComponent } from './components/order/order.component'; 
 
  import { CommonService } from './services/common.service' 
 
  @NgModule({ 
 
    declarations: [UserComponent, AddressComponent, OrderComponent], 
 
    // 导出该模块的组件，不导出的话，无法在其他模块使用该模块的组件 
 
    // exports: [UserComponent, OrderComponent], 
 
    imports: [ 
 
      CommonModule, 
 
      UserRoutingModule 
 
    ], 
 
    providers: [CommonService] 
 
  }) 
 
  export class UserModule { }

　　三. 在根组件中引入自定义模块 app.module.ts

 
  // 引入自定义模块 
 
  import { UserModule } from './modules/user/user.module'

 
  @NgModule({ 
 
    imports: [ 
 
      BrowserModule, 
 
      AppRoutingModule, 
 
      UserModule 
 
    ], 
 
    providers: [], 
 
    bootstrap: [AppComponent] 
 
  })

　　四. 在根路由模块中配置 app-routing.ts, 使用 loadChildren : '模块路径#模块类名称'

 
  import { NgModule } from '@angular/core'; 
 
  import { Routes, RouterModule } from '@angular/router'; 
 
  const routes: Routes = [ 
 
    { path: 'user', loadChildren: "./modules/user/user.module#UserModule" }, 
 
    { path: 'news', loadChildren: "./modules/news/news.module#NewsModule" }, 
 
    { path: 'product', loadChildren: "./modules/product/product.module#ProductModule" }, 
 
    { path: '**', redirectTo: 'user' }  
 
  ]; 
 
  @NgModule({ 
 
    imports: [RouterModule.forRoot(routes)], 
 
    exports: [RouterModule] 
 
  }) 
 
  export class AppRoutingModule { }

Custom modules angular

Guess you like