app-routing.module.ts 简单介绍

Angular的**路由**是一种功能，它允许应用程序响应不同的URL路径或参数并根据这些路径加载不同的组件。

app-routing.module.ts

是Angular项目中负责设置应用程序路由的文件。

以下是一个简单的

app-routing.module.ts

文件示例，它配置了三个路由：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { MyComponent } from './my-module/my-module.module';
 
// 定义路由
const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent }，
  { path: 'my',
    loadChildren: () => import('./my-module/my-module.module').then(m => m.MyModule) }
];
 
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

在这个例子中，

HomeComponent

被映射到根路径（

''

），而

AboutComponent

被映射到路径

about，与前两种不同的是my路径下，采用的动态导入的方式导入路由。

RouterModule.forRoot(routes)

用于初始化应用程序的主路由配置。

要使用这个模块，你需要在

AppModule

中导入它

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
 
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule // 导入AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

这样，Angular应用程序就会根据URL的路径来加载相应的组件。

**

imports

和

exports

**

** 在Angular中，‌

imports

和

exports

是NgModule装饰器中的两个重要属性，‌它们分别用于导入其他模块的声明以及导出本模块的声明，‌以便其他模块可以使用。‌**

• imports属性用于指定当前模块依赖的其他模块。‌这允许当前模块使用其他模块中声明的组件、‌指令、‌管道等。‌通过导入这些模块，‌当前模块可以访问并使用它们提供的服务和功能。‌
• exports属性则用于指定当前模块中哪些声明（‌如组件、‌指令、‌管道）‌可以被其他模块访问和使用。‌当一个模块想要将其内部的某些声明暴露给其他模块时，‌可以通过exports属性来实现。‌这样，‌其他模块就可以在模板中使用这些被导出的声明。‌

简而言之，‌

imports

允许一个模块使用其他模块的功能，‌而

exports

则允许一个模块向其他模块提供自己的功能。‌这两个属性共同构成了Angular模块系统中的依赖和依赖关系管理机制，‌确保了模块之间的正确交互和功能的复用

动态导入

** Angular中的动态导入是一种在运行时按需加载模块的技术，‌旨在优化应用程序的性能和加载时间。‌**

** **动态导入允许开发者在运行时根据需要加载特定的模块，‌而不是在应用程序启动时一次性加载所有模块。‌这种技术可以显著减少初始加载时间，‌提高应用程序的响应速度和性能。‌在Angular中，‌动态导入的实现主要依赖于TypeScript的

import()

函数，‌它允许开发者异步加载JavaScript模块。‌

动态导入的语法相对简单，‌通过使用反引号

包裹模块路径，‌然后使用

import()

关键字来异步加载模块。‌一旦模块加载完成，‌可以在

.then()

块中使用它。‌

懒加载

懒加载是一种优化应用启动时间的策略，它允许将应用的某些部分（如特定的功能模块）拆分为独立的代码块，然后在需要时才加载这些代码块。

例如：本文例子中，

HomeComponent

被映射到根路径（

''

），只有当用户访问

''

路径时，才会加载

HomeComponent，

当访问 '

about

' 路径时，才会加载

AboutComponent，

当访问 '

my

' 路径时，才会加载

MyModule

当应用程序包含多个功能模块时，‌为了提高初始加载性能，‌可以决定懒加载这些模块

下面是动态导入与懒加载的区别（引用部分）：

Angular 动态导入（Dynamic Import）和懒加载（Lazy Loading）在前端开发中通常一起使用，它们都是为了提高应用性能和用户体验的一种优化策略。

动态导入允许你在运行时按需加载模块，而不是在启动应用程序时立即下载所有模块。当用户首次访问包含某个路由的页面时，Angular 的 Router 会通过动态导入功能异步加载相应的模块，只有当这个路由被导航到时，相关的代码才会开始执行，从而避免了不必要的初始化开销。

懒加载则是 Angular 提供的一种更高级别的性能优化技术，它将应用程序拆分成几个小的、独立的区域（称为“片段”或“懒加载组件”），每个区域有自己的路由。当你进入一个新的路由时，Angular 只会加载该路由及其依赖的部分，而不是一开始就加载整个应用的所有内容。

简而言之，这是两种概念

• 动态导入是在运行时加载模块，可以用于按需加载任何代码。
• 懒加载是在应用启动时不加载某个模块或特定功能，直到用户实际需要该功能