Angular 中的功能模块：分解大型应用程序

2020-07-02 08:00:00 · 飞浪

介绍当您使用AngularCLI命令创建一个新的Angular项目时，您将获得一个全新的应用程序以及一个名为AppModule的模块。您可以很好地在这个模块中编写整个应用程序，但这不是

介绍

当您使用 Angular CLI 命令创建一个新的 Angular 项目时，您将获得一个全新的应用程序以及一个名为AppModule的模块。您可以很好地在这个模块中编写整个应用程序，但这不是一个好主意，因为它会使应用程序的加载速度非常慢，具体取决于应用程序的大小。您必须将大型应用程序拆分为功能模块，以便您可以：

避免一次性加载整个应用
在后台预加载功能模块
当用户访问功能模块内实现的功能时，按需延迟加载功能模块

在本指南中，您将了解功能模块和功能模块的延迟加载的优势，并了解它对应用加载时间的影响。

功能模块的优势

延迟加载- 将应用程序分成多个功能模块的优点之一是能够按需延迟加载代码。当用户点击托管在 Web 服务器上的 Angular 应用程序时，浏览器会下载应用程序成功运行所需的所有文件。如果应用程序被分成多个功能模块，但如果所有功能模块都是即时加载的，那么所有功能模块也会被下载，这会增加应用程序的加载时间。但如果某些功能模块是延迟加载的，那么在应用程序首次运行时不会下载它们的代码。仅当用户尝试访问延迟加载功能模块的一部分功能时，才会下载延迟加载功能模块的代码。
干净的代码——将应用程序分成多个功能模块可以使代码干净，因为特定模块的所有工件都分组在该模块的文件夹内。
更快地定位代码- 由于特定模块的所有工件都分组在该模块的文件夹内，因此可以快速轻松地定位代码。

入门

先决条件

要完成本指南，您应该具有：

节点-12.17.0
Angular CLI——9.0.2
Visual Studio Code - 1.45.1

创建一个 Angular 项目

执行以下命令创建一个 Angular 项目。

ng 新功能模块演示

当提示向应用程序添加路由时，按Y。
当提示选择样式表格式时，按ENTER。

在 Visual Studio Code 中打开生成的应用程序

单击顶部菜单栏中的文件菜单，然后选择菜单选项打开文件夹。
在文件对话框中，导航到生成应用程序的文件夹。
在此文件夹中，您应该看到一个名为feature-modules-demo 的文件夹。选择此文件夹并在文件对话框中单击“打开” 。

设置项目

您将安装 Twitter Bootstrap 和 jQuery，并在您的项目中引用它们，以便您可以使用一些表单样式来使表单看起来美观。

转到命令提示符并运行以下命令：

cd 功能模块演示

运行以下命令来安装 jQuery：

npm 我 jquery

运行以下命令安装 Bootstrap：

npm 我 bootstrap

在 Visual Studio Code 中，打开文件angular.json。
在src/style.css之前的样式数组中添加以下行。

“node_modules/bootstrap/dist/css/bootstrap.min.css”，

在脚本数组中添加以下行：

“node_modules/jquery/dist/jquery.min.js”，“node_modules/bootstrap/dist/js/bootstrap.min.js”

在 Visual Studio Code 中，打开文件src > index.html。
在第 10 行的 body 元素中，添加以下类：

类=“容器”

最终的代码看起来应该是这样的：

      <body class="container">
  <app-root></app-root>
</body>
    

现在该项目已一切准备就绪，可以进行开发了。

创建用户资料功能模块

运行以下命令生成用户配置文件模块：

ng 生成模块用户配置文件

在用户配置文件模块中创建登录组件

运行以下命令在用户配置文件模块中生成登录组件：

ng 生成组件 --module 用户配置文件登录

在 Visual Studio Code 中，打开文件src > app > login > login.component.html，删除文件内容并添加以下代码：

      <h1>Login</h1>
<hr>
<div class="col-md-4">
  <form autocomplete="off">
    <div class="form-group" >
      <label for="userName">User Name:</label>
      <input id="userName" type="text" class="form-control" placeholder="User Name..." />
    </div>
    <div class="form-group" >
      <label for="password">Password:</label>
      <input id="password" type="password" class="form-control"placeholder="Password..." />
    </div>
        
    <button type="submit" class="btn btn-primary">Login</button>
    <button type="button" class="btn btn-default">Cancel</button>
  </form>
</div>
    

向用户配置文件模块添加路线

在 Visual Studio Code 中，打开文件src > app > user-profile > user-profile.module.ts，删除文件内容，并添加以下代码：

      import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LoginComponent } from '../login/login.component';
import { Routes, RouterModule } from '@angular/router';

const routes:Routes = [
  {path: 'login', component: LoginComponent}
];

@NgModule({
  declarations: [LoginComponent],
  imports: [
    CommonModule,
    RouterModule.forChild(routes)
  ]
})
export class UserProfileModule { }
    

延迟加载用户配置文件模块

在 Visual Studio Code 中，打开文件src > app > app-routing.module.ts，删除文件内容并添加以下代码：

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


const routes: Routes = [
  {path:'user', loadChildren: () => import(`./user-profile/user-profile.module`).then(m => m.UserProfileModule)}
];

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

添加延迟加载模块的链接

在 Visual Studio Code 中，打开文件src > app > app.component.html，删除文件内容并添加以下代码：

      <div class="row">
	<div class="col-md-2">
		<a [routerLink]="['user/login']">Login</a>
	</div>
</div>
<div class="row">
	<div class="col-md-12">
		<router-outlet></router-outlet>
	</div>
</div>
    

检查延迟加载的模块

在本节中，您将注意到延迟加载的用户配置文件功能模块的优势。

在命令提示符中运行以下命令，以监视模式启动 Angular Development Server：ng serve
如果提示分享 Angular CLI 使用数据，请按 N 键表示不分享。
打开浏览器并在地址栏中输入以下 URL 来启动应用程序：https://localhost:4200。
在用于浏览应用程序的浏览器中打开开发者工具栏。如果您使用的是 Chrome，请按 CTRL+SHIFT+J，开发者工具栏将为您打开。
在开发人员工具栏中，单击源选项卡，并注意列出的所有文件。请注意，没有名为user-profile-user-profile-module.js 的文件。
单击“登录”链接，您会注意到文件user-profile-user-profile-module.js已立即下载。

这是延迟加载的功能模块的优点，其中代码直到需要时才加载到内存中。

预加载惰性加载的功能模块

在 Visual Studio Code 中，打开文件src > app > app-routing.module.ts，删除文件内容，并添加以下代码：

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


const routes: Routes = [
  {path:'user', loadChildren: () => import(`./user-profile/user-profile.module`).then(m => m.UserProfileModule)}
];

@NgModule({
  imports: [RouterModule.forRoot(routes, {
		// Tell the router to use the HashLocationStrategy.
		useHash: true,
		enableTracing: false,
 
		// This will tell Angular to preload the lazy-loaded routes after the
		// application has been bootstrapped. This will extend to both top-level
		// and nested lazy-loaded modules.
		preloadingStrategy: PreloadAllModules
	})],
  exports: [RouterModule]
})
export class AppRoutingModule { }
    

检查延迟加载模块的预加载

在浏览器中点击以下 URL：https://localhost:4200
注意源选项卡中的文件列表。文件user-profile-user-profile-module.js无需单击“登录”链接即可自动加载。

这是延迟加载功能模块的第二个优点。功能模块在应用程序首次渲染完成后在后台加载。

结论

在本指南中，您了解到：

功能模块的优点
特性模块的延迟加载
预加载惰性加载的功能模块

欲了解更多信息，请遵循延迟加载 ngmodules指南。

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

阅读全文

Angular 中的功能模块：分解大型应用程序

杭州电子商务研究院

4年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

<h1>Login</h1> <hr> <div class="col-md-4"> <form autocomplete="off"> <div class="form-group" > <label for="userName">User Name:</label> <input id="userName" type="text" class="form-control" placeholder="User Name..." /> </div> <div class="form-group" > <label for="password">Password:</label> <input id="password" type="password" class="form-control"placeholder="Password..." /> </div> <button type="submit" class="btn btn-primary">Login</button> <button type="button" class="btn btn-default">Cancel</button> </form> </div>

import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { LoginComponent } from '../login/login.component'; import { Routes, RouterModule } from '@angular/router'; const routes:Routes = [ {path: 'login', component: LoginComponent} ]; @NgModule({ declarations: [LoginComponent], imports: [ CommonModule, RouterModule.forChild(routes) ] }) export class UserProfileModule { }

import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; const routes: Routes = [ {path:'user', loadChildren: () => import(`./user-profile/user-profile.module`).then(m => m.UserProfileModule)} ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { }

<div class="row"> <div class="col-md-2"> <a [routerLink]="['user/login']">Login</a> </div> </div> <div class="row"> <div class="col-md-12"> <router-outlet></router-outlet> </div> </div>

import { NgModule } from '@angular/core'; import { Routes, RouterModule, PreloadAllModules } from '@angular/router'; const routes: Routes = [ {path:'user', loadChildren: () => import(`./user-profile/user-profile.module`).then(m => m.UserProfileModule)} ]; @NgModule({ imports: [RouterModule.forRoot(routes, { // Tell the router to use the HashLocationStrategy. useHash: true, enableTracing: false, // This will tell Angular to preload the lazy-loaded routes after the // application has been bootstrapped. This will extend to both top-level // and nested lazy-loaded modules. preloadingStrategy: PreloadAllModules })], exports: [RouterModule] }) export class AppRoutingModule { }