[Angular] 笔记 7:模块

Angular 中的模块(modules) 是代码在逻辑上的最大划分 ,它类似于C++, C# 中的名字空间

module 可分为如下几种不同的类型:

使用模块的第一个原因是要对代码进行逻辑上的划分,第二个非常重要的原因是为了实现懒惰加载(lazy loading),即不同的模块仅在使用时才加载。

生成模块相关指令举例:

VS Terminal 运行命令:

sh 复制代码
PS D:\Angular\my-app> ng generate module pokemon-base
CREATE src/app/pokemon-base/pokemon-base.module.ts (197 bytes)

这里模块名称pokemon-base后面没有再加一个 -module是因为Angular会自动加上一个 .module, pokemon-base-module.module 看起来会很奇怪,从 VS code 可看到新生成的文件夹 pokemon-base以及新文件 pokemon-base.module.ts

非常重要的一点,pokemon-base.module.ts 文件中要加上exports: [ ],

ts 复制代码
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

@NgModule({
  declarations: [],
  imports: [CommonModule],
  // important
  exports: [],
})
export class PokemonBaseModule {}

VS Terminal 运行命令生成一个 UI 组件 pokemon-list:

sh 复制代码
PS D:\Angular\my-app> ng generate component pokemon-base/pokemon-list --module=pokemon-base/pokemon-base.module.ts
CREATE src/app/pokemon-base/pokemon-list/pokemon-list.component.html (27 bytes)
CREATE src/app/pokemon-base/pokemon-list/pokemon-list.component.spec.ts (635 bytes)
CREATE src/app/pokemon-base/pokemon-list/pokemon-list.component.ts (298 bytes)
CREATE src/app/pokemon-base/pokemon-list/pokemon-list.component.css (0 bytes)
UPDATE src/app/pokemon-base/pokemon-base.module.ts (308 bytes)

可以看到项目中新生成的组件文件夹以及文件:

同时修改 pokemon-base.module.ts 中的 exports: [ ],

ts 复制代码
@NgModule({
  declarations: [],
  imports: [CommonModule],
  // 增加 PokemonListComponent
  exports: [PokemonListComponent],
})
export class PokemonBaseModule {}

修改 app.module.ts 中的 imports

ts 复制代码
@NgModule({
  declarations: [AppComponent],
  // 增加 PokemonBaseModule
  imports: [BrowserModule, AppRoutingModule, PokemonBaseModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

app.component.html 中增加新生成的组件:

运行 ng serve

相关推荐
遂心_17 小时前
为什么 '1'.toString() 可以调用?深入理解 JavaScript 包装对象机制
前端·javascript
王同学QaQ17 小时前
Vue3对接UE,通过MQTT完成通讯
javascript·vue.js
程序员鱼皮18 小时前
刚刚 Java 25 炸裂发布!让 Java 再次伟大
java·javascript·计算机·程序员·编程·开发·代码
Asort18 小时前
JavaScript 从零开始(五):运算符和表达式——从零开始掌握算术、比较与逻辑运算
前端·javascript
一枚前端小能手18 小时前
🚀 缓存用错了网站更慢?前端缓存策略的5个致命误区
前端·javascript
艾小码18 小时前
为什么你的页面会闪烁?useLayoutEffect和useEffect的区别藏在这里!
前端·javascript·react.js
艾小码18 小时前
告别Vue混入的坑!Composition API让我效率翻倍的3个秘密
前端·javascript·vue.js
小高00718 小时前
🔍说说对React的理解?有哪些特性?
前端·javascript·react.js
烛阴18 小时前
【TS 设计模式完全指南】懒加载、缓存与权限控制:代理模式在 TypeScript 中的三大妙用
javascript·设计模式·typescript
Samsong18 小时前
JavaScript逆向之反制无限debugger陷阱
前端·javascript