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的路径来加载相应的组件。

importsexports

  在Angular中,‌importsexports是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 只会加载该路由及其依赖的部分,而不是一开始就加载整个应用的所有内容。

  简而言之,这是两种概念

  • 动态导入是在运行时加载模块,可以用于按需加载任何代码。

  • 懒加载是在应用启动时不加载某个模块或特定功能,直到用户实际需要该功能

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/51677.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SAPUI5基础知识22 - 图标(Icons)

1. 背景 SAPUI5 提供了一套丰富的图标库,可以用于增强应用程序的视觉吸引力和用户体验。这些图标是矢量图形,可以在任何分辨率下保持清晰,并且可以自定义颜色和大小。 2. 示例 在 SAPUI5 中,图标可以通过 sap.ui.core.Icon 控件…

Redis快速入门基础

Redis入门 Redis是一个基于内存的 key-value 结构数据库。mysql是二维表的接口数据库 优点: 基于内存存储,读写性能高 适合存储热点数据(热点商品、资讯、新闻) 企业应用广泛 官网:https://redis.io 中文网:https://www.redis.net.cn/ Redis下载与…

Spring缓存注解

Spring缓存注解 EnableCaching | 来启动缓存注解Cached | 用来表示某一个方法的结果可以被缓存 Cached(name “testCache:id1:”, key “#testId”, cacheType CacheType.REMOTE, localLimit CustomerConstants.DEFAULT_LIMIT, expire 1800)方法方法上。 #相关参数&#…

The Llama 3 Herd of Models 第6部分推理部分全文

第1,2,3部分 介绍,概览和预训练 第4部分 后训练 第5部分 结果 6 Inference 推理 我们研究了两种主要技术来提高Llama 3405b模型的推理效率:(1)管道并行化和(2)FP8量化。我们已经公开发布了FP8量化的实现。 6.1 Pipeline Parallelism 管道并行 当使用BF16数字表示模型参数时…

家具购物小程序的设计

管理员账户功能包括:系统首页,个人中心,用户管理,家具分类管理,家具新品管理,订单管理,系统管理 微信端账号功能包括:系统首页,家具新品,家具公告&#xff0…

【开发学习笔记】git的工作区与分支

Git是一款分布式版本控制系统,被广泛应用于软件开发中,用于跟踪和管理项目的源代码。在Git中,工作区与分支是两个核心概念,它们在Git的工作流程中扮演着不同的角色。 工作区的概念 工作区(Working Directory&#xf…

Linux网络——深入理解传入层协议TCP

目录 一、前导知识 1.1 TCP协议段格式 1.2 TCP全双工本质 二、三次握手 2.1 标记位 2.2 三次握手 2.3 捎带应答 2.4 标记位 RST 三、四次挥手 3.1 标记位 FIN 四、确认应答(ACK)机制 五、超时重传机制 六 TCP 流量控制 6.1 16位窗口大小 6.2 标记位 PSH 6.3 标记…

YOLOv5改进 | 卷积模块 | 无卷积步长用于低分辨率图像和小物体的新 CNN 模块SPD-Conv

秋招面试专栏推荐 :深度学习算法工程师面试问题总结【百面算法工程师】——点击即可跳转 💡💡💡本专栏所有程序均经过测试,可成功执行💡💡💡 专栏目录: 《YOLOv5入门 改…

[ WARN:0@0.014] global loadsave.cpp:248 cv::findDecoder imread_

[ WARN:00.014] global loadsave.cpp:248 cv::findDecoder imread_ 目录 [ WARN:00.014] global loadsave.cpp:248 cv::findDecoder imread_ 【常见模块错误】 【解决方案】 欢迎来到英杰社区https://bbs.csdn.net/topics/617804998 欢迎来到我的主页,我是博主英杰…

20240729 每日AI必读资讯

Meta科学家最新采访,揭秘Llama 3.1是如何炼成的 - Llama 3.1都使用了哪些数据?其中有多少合成数据?为什么不使用MoE架构?后训练与RLHF流程是如何进行的?模型评估是如何进行的? - 受访者Thomas Scialom现任…

ReactHooks(二)

上期在这~ ReactHooks【二】 一.useReducer1.1 useReducer 的语法格式1.2 定义组件的基础结构1.3 定义 useReducer 的基础结构1.3.1按需导入 useReducer 函数1.3.2定义初始数据1.3.3 定义 reducer 函数根据旧状态,进行一系列处理,最终返回新状态&#x…

Go语言教程(一看就会)

全篇文章 7000 字左右, 建议阅读时长 1h 以上。 Go语言是一门开源的编程语言,目的在于降低构建简单、可靠、高效软件的门槛。Go平衡了底层系统语言的能力,以及在现代语言中所见到的高级特性。它是快速的、静态类型编译语言。 第一个GO程序…

嵌入式人工智能(32-基于树莓派4B的旋转编码器-EnCoder11)

1、旋转编码器 旋转编码器是一种输入设备,通常用于测量和控制旋转运动。它由一个旋转轴和一系列编码器组成。旋转编码器可以根据旋转轴的位置和方向来测量旋转角度,并将其转化为电子信号输出。 旋转编码器通常分为两种类型:绝对值编码器和增…

【ai】Easy-RAG 4: 修复依赖项:numpy numba omegaconf 等

numpy 2.0.1 这个版本太高了 chromadb 0.5.5 requires numpy<2.0.0,>=1.22.5,but you have numpy 2.0.1 which is incompatible.gradio 4.29.0 requires numpy~=1.0, but you have numpy 2.0.1 which is incompatible.langchain 0.2.6 requires numpy<2,>=1; pytho…

力扣面试题(一)

1、给你两个字符串 word1 和 word2 。请你从 word1 开始&#xff0c;通过交替添加字母来合并字符串。如果一个字符串比另一个字符串长&#xff0c;就将多出来的字母追加到合并后字符串的末尾。 char * mergeAlternately(char * word1, char * word2){int len1 strlen(word1);i…

嵌入式学习Day13---C语言提升

目录 一、二级指针 1.1.什么是二级指针 2.2.使用情况 2.3.二级指针与数组指针 二、指针函数 2.1.含义 2.2.格式 2.3.注意 2.4.练习 三、函数指针 3.1.含义 3.2.格式 3.3.存储 3.4.练习 ​编辑 四、void*指针 4.1.void缺省类型 4.2.void* 4.3.格式 4.4.注…

H3CNE(OSPF动态路由)

目录 7.1 静态路由的缺点与动态路由分类 7.1.1 静态路由的缺点 7.1.2 动态路由的分类 7.2 OSPF基础 7.2.1 OSPF的区域 ​编辑 7.2.2 Router-id 7.2.3 开销-Cost or Metric 7.2.4 路由转发 7.3 OSPF邻居表建立过程 7.3.1 五种包 7.3.2 建立邻居表的第一步 7.3.3 邻居建立…

模拟实现短信登录功能 (session 和 Redis 两种代码实例) 带前端演示

目录 整体流程 发送验证码 短信验证码登录、注册 校验登录状态 基于 session 实现登录 实现发送短信验证码功能 1. 前端发送请求 2. 后端处理请求 3. 演示 实现登录功能 1. 前端发送请求 2. 后端处理请求 校验登录状态 1. 登录拦截器 2. 注册拦截器 3. 登录完整…

RocketMQ事务消息机制原理

RocketMQ工作流程 在RocketMQ当中&#xff0c;当消息的生产者将消息生产完成之后&#xff0c;并不会直接将生产好的消息直接投递给消费者&#xff0c;而是先将消息投递个中间的服务&#xff0c;通过这个服务来协调RocketMQ中生产者与消费者之间的消费速度。 那么生产者是如何…

C++里memset的使用

在C中使用memset函数涉及几个关键点&#xff0c;‌包括函数的正确调用方式、‌参数的理解以及注意事项。‌memset函数是C和C语言标准库中的一个函数&#xff0c;‌用于将内存区域设置为特定的值。‌它的基本语法如下&#xff1a;‌ void *memset(void *s, int c, size_t n); …