A deep dive into modules and lazy loading in Angular-JS Tutorial-php.cn

This article will introduce to you the use of Angular modules and lazy loading. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

A deep dive into modules and lazy loading in Angular

Related recommendations: "angular Tutorial"

1. Angular built-in modules

A deep dive into modules and lazy loading in Angular

2. Angular custom module

When our project is relatively small No need for custom modules. 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

A deep dive into modules and lazy loading in Angular

Create a new user module

ng g module module/user

Copy after login

Create a new root component under the user module

ng g component module/user

Copy after login

Create a new address, order, profile component 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

Copy after login

How to mount the user module in the root module?

When referencing the user component in the template file app.component.html of the app root component, an error will be reported
The following processing is required before it can be accessed

1. In the app .module.ts introduces modules

A deep dive into modules and lazy loading in Angular

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

A deep dive into modules and lazy loading in Angular

3 , introduce

<app-user></app-user>

Copy after login

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 expose it in the user module user.module.ts first

Exposing components allows other modules to use exposed components/ exports:[UserComponent,AddressComponent]

How to mount the product module in the root module?

Same as above

Create services under the user module

1. Create

ng g service module/user/services/common

Copy after login

2. Introduce services in the user module

user.module.ts

Copy after login

A deep dive into modules and lazy loading in Angular

Configure routing to implement module lazy loading

A deep dive into modules and lazy loading in Angular

Create module:

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

Copy after login

Create 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

Copy after login

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 is actually loading Modules, there are no examples of lazy loading 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 &#39;@angular/core&#39;;
import { Routes, RouterModule } from &#39;@angular/router&#39;;
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Copy after login

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 &#39;./app-routing.module&#39;;
...
imports: [
    AppRoutingModule,
]

Copy after login

2. Configure routing in the submodule

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

    import { NgModule } from &#39;@angular/core&#39;;
    import { Routes, RouterModule } from &#39;@angular/router&#39;;

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

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

Copy after login

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 &#39;./article.component&#39;;
const routes: Routes = [
  {
    path:&#39;&#39;,
    component:ArticleComponent
  }
];

......

Copy after login

3. Configure routing in the routing module of the app

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

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

Copy after login

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 &#39;@angular/core&#39;;
import { Routes, RouterModule } from &#39;@angular/router&#39;;

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

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

Copy after login

product Module:

module\product\product.module.ts

import { ProductRoutingModule } from &#39;./product-routing.module&#39;;

imports: [
    ProductRoutingModule
  ],

Copy after login

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

import { NgModule } from &#39;@angular/core&#39;;
import { Routes, RouterModule } from &#39;@angular/router&#39;;

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

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

Copy after login

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

import {UserRoutingModule} from &#39;./user-routing.module&#39;;  +

 imports: [
    UserRoutingModule   +
  ],

Copy after login

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.

配置子路由

1、在商品模块的路由product-routing.module.ts 配置子路由

import { PlistComponent } from &#39;./components/plist/plist.component&#39;;
import { CartComponent } from &#39;./components/cart/cart.component&#39;;
import { PinfoComponent } from &#39;./components/pinfo/pinfo.component&#39;;

const routes: Routes = [
  {
    path:&#39;&#39;,
    component:ProductComponent,
    children:[
      {path:&#39;cart&#39;,component:CartComponent},
      {path:&#39;pcontent&#39;,component:PinfoComponent}
    ]
  },
  {path:&#39;plist&#39;,component:PlistComponent}
];

Copy after login

2、在商品模块的模板product.component.html 添加router-outlet

<router-outlet></router-outlet>

Copy after login

3、在页面app.component.html添加菜单，方便跳转

<a [routerLink]="[&#39;/product&#39;]">商品模块</a><a [routerLink]="[&#39;/product/plist&#39;]">商品列表</a>

Copy after login

更多编程相关知识，请访问：编程视频！！

The above is the detailed content of A deep dive into modules and lazy loading in Angular. For more information, please follow other related articles on the PHP Chinese website!