Talk about the use of Angular modules and lazy loading

Related tutorial recommendations: angularjs (Video tutorial)

1. Angular built-in modules

2. Angular custom module

When our project is relatively small, we don’t need to customize the module. But when our project is very large, it is not particularly appropriate to mount all components into the root module. So at this time we can customize modules to organize our projects. And lazy loading of routes can be achieved through Angular custom modules.

ng g module mymodule

Create a new user module

ng g module module/user

Create a new root component under the user module

ng g component module/user

Create a new one The address, order, and profile components under the user module

ng g component module/user/components/address
ng g component module/user/components/order
ng g component module/user/components/profile

How to mount the user module in the root module?

Referring to the user component in the template file app.component.html of the app root component will report an error
The following processing is required before it can be accessed

1. Introduced in app.module.ts Module

2. The user module exposes components to be accessed by the outside world
   

3. Introduce

<app-user></app-user>

in the root template app.component.html. If you need to use the app-address component directly in the root component, you also need to first add it to the user module user.module. ts exposure

/Expose components so that other modules can use exposed components/
exports:[UserComponent,AddressComponent]

How to mount product in the root module What about modules?

Same as above

Create services under user module

1. Create
   ng g service module/user/services/common

2. Introducing services in the user module
   user.module.ts

##Configure routing to implement module lazy loading

Create a module:

ng g module module/user --routing
ng g module module/article --routing
ng g module module/product --routing

Create a component:

ng g component module/user
ng g component module/user/components/profile
ng g component module/user/components/order
ng g component module/article
ng g component module/article/components/articlelist ng g component module/article/components/info
ng g component module/product
ng g component module/product/components/plist
ng g component module/product/components/pinfo

Let’s take article as an example:

angular configuration lazy loading

Routing in angular can load both components and modules, and what we call lazy loading actually means loading modules. There are no examples of lazy loading of components yet.

To load components, use the component keyword
To load modules, use the loadChildren keyword

1. Create a new app-routing.module.ts

content in the app folder As follows:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

forRoot is used to load routing configuration in the root module,

and forChild is used to load routing configuration in submodules.

Note: You need to import the AppRoutingModule module in the root template app.module.ts

import { AppRoutingModule } from './app-routing.module';
...
imports: [
    AppRoutingModule,
]

2. Configure routing in the submodule

In \module\article\article- Configure routing in routing.module.ts

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

    // import {ArticleComponent} from './article.component';
    const routes: Routes = [
    // {
    //     path:'',
    //     component:ArticleComponent
    // }
    ];

    @NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
    })
    export class ArticleRoutingModule { }

You can also add the routing module when creating a new project, you can omit the above configuration

In article module -routing.module.ts Configure routing

.....

import {ArticleComponent} from './article.component';
const routes: Routes = [
  {
    path:'',
    component:ArticleComponent
  }
];

......

3. Configure routing in the routing module of the app

const routes: Routes = [
  {
    path:'article',
    //写法一：
    loadChildren:'./module/article/article.module#ArticleModule'

    //写法二
    // loadChildren: () => import('./module/user/user.module').then( m => m.UserModule)  
  },
  // {
  //   path:'user',loadChildren:'./module/user/user.module#UserModule'
  // },
  // {
  //   path:'product',loadChildren:'./module/product/product.module#ProductModule'
  // },
  {
    path:'**',redirectTo:'article'
  }
];

If you did not add –routing when creating a new module before , need to configure the routing of the module

product module The routing of product: module\product\product-routing.module.ts

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

import {ProductComponent} from './product.component';
const routes: Routes = [
  {
    path:'',
    component:ProductComponent
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class ProductRoutingModule { }

product Module:

module\product\product.module.ts

import { ProductRoutingModule } from './product-routing.module';

imports: [
    ProductRoutingModule
  ],

user module user’s routing: \module\user\user-routing.module.ts

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

import {UserComponent} from './user.component';
const routes: Routes = [
  {
    path:'',
    component:UserComponent
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class UserRoutingModule { }

user’s module: \module\user\user.module.ts

import {UserRoutingModule} from './user-routing.module';  +

 imports: [
    UserRoutingModule   +
  ],

RouterModule.forRoot() and RouterModule.forChild()

The RouterModule object provides two static methods: forRoot() and forChild() to configure routing information.

The RouterModule.forRoot() method is used to define main routing information in the main module. RouterModule.forChild() is similar to the Router.forRoot() method, but it can only be applied in feature modules.

That is, use forRoot() in the root module and forChild() in the submodule.

Configure sub-routing

Configure sub-routing in product-routing.module.ts of the product module

1. import { PlistComponent } from './components/plist/plist.component';
   import { CartComponent } from './components/cart/cart.component';
   import { PinfoComponent } from './components/pinfo/pinfo.component';
   
   const routes: Routes = [
     {
       path:'',
       component:ProductComponent,
       children:[
         {path:'cart',component:CartComponent},
         {path:'pcontent',component:PinfoComponent}
       ]
     },
     {path:'plist',component:PlistComponent}
   ];

In the product module Template product.component.html Add router-outlet

2. <router-outlet></router-outlet>

Add menu to page app.component.html for easy jump

3. <a>商品模块</a>
   <a>商品列表</a>

More programming related Knowledge, accessible:

programming learning course! !

The above is the detailed content of Talk about the use of Angular modules and lazy loading. For more information, please follow other related articles on the PHP Chinese website!