Angular自学笔记（一）ngModule 元数据

最新推荐文章于 2025-05-09 13:08:08 发布
最新推荐文章于 2025-05-09 13:08:08 发布
阅读量378 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： Angular自学笔记 文章标签： Angular
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/yusirxiaer/article/details/113827229
本文是Angular自学笔记的第一部分，主要讲解Angular的ngModule，包括其元数据对象、declarations、imports、providers和bootstrap数组的用法。Angular module是一个被@NgModule装饰的类，用于定义应用的构造模块。declarations用于声明组件、指令和管道，imports用于导入其他模块，providers提供服务，而bootstrap数组则指定应用的根组件。
工作硬上开发angular项目，好难啊，上网搜资料教程真的贼少，吐槽真的没什么人用angular，自己学习到处搜集整理的笔记，分享出来，方便查看理解总结。应该适用于angular11系列（更新真快，反正我也不知道之前低版本不同 手动狗头）

什么是angular module(ngModule)?

angular module就是一个普通的类，但是这个类，一旦被@NgModule所装饰，那这个类就可以被称为angular module

@NgModule元数据

@NgModule 获取一个元数据对象，它会告诉 Angular 如何编译和启动本应用

  • declarations —— 该模块的依赖项。
  • imports —— 导入其他的ngModule。
  • providers —— 提供各种服务。
  • bootstrap —— 根组件，Angular 创建它并插入 index.html 宿主页面

declarations 数组

该模块想要正常工作，可能会依赖一些组件、指令和管道，那就

了解本专栏 订阅专栏 解锁全文
Angular学习笔记
m0_60888118的博客
02-05 903
由于项目需要，最近学习了angular框架，相比于vue,angular还是有一定的难度，所以做一个记录与总结，方便以后学习！
Angular 监听服务（Service）中的数据变化
专注前端技术，包括Web端、移动端、小程序、APP
11-17 3915
在上一篇文章中，我对服务的作用及创建使用稍作介绍。那么，问题来了，在服务中 这个公共领域，如果其属性值发生变化，那我们如何将其更新到组件中呢？ 首先，你需要了解Angular的完整生命周期，对应的生命周期钩子的作用是什么，都分别在什么时候触发。 lifecycle.components.ts import { Component, OnInit } from '@angular/core'; import { UserService } from "../../services/user/user.serv
Angular 2 学习笔记
...
12-14 1626
1、模块 (Modules)：2、3、模板 (Templates)：4、元数据 (Metadata)：5、数据绑定 (Data Binding)6、指令 (Directives)7、服务 (Services)：8、依赖注入 (Dependency Injection)9、路由（Route）：建立URL路径和组件之间的对应关系，根据不同的URL路径匹配对应的组件并渲染。
Angular 元数据
Jay的专栏
06-29 1499
元数据告诉 Angular 如何处理一个类。@Component({ selector: 'hero-list', templateUrl: './hero-list.component.html', providers: [ HeroService ] }) export class HeroListComponent implements OnInit { /* . . .
四：Angular 元数据 (Metadata)
weixin_30908941的博客
07-31 309
元数据告诉 Angular 如何处理一个类。 @Component({ selector: 'hero-list', templateUrl: './hero-list.component.html', providers: [ HeroService ] }) export class HeroListComponent implements OnIni...
Angular组件元数据
weixin_34107739的博客
05-08 210
2019独角兽企业重金招聘Python工程师标准>>> ...
angular 组件元数据一览
何欣澄的博客
08-01 1502
名称 类型 作用 selector string 自定义组件的标签，用于匹配元素。 inputs string[] 指定组件的输入属性。 outputs string[] 指定组件的输出属性 host {[key:string],string} 指定指令或组件的事件，动作和属性等 providers any[] 指定该组件及其所有子组
深入了解angular的模块化系统NgModule
qq_31392495的博客
11-11 519
Angular应用就是模块化的，它的模块化系统NgModule相当于一个容器。NgModule通过它的元数据收集一些组件，指令，module、管道和一些其他的代码形成一个领域，并未这个领域提供一个编译上下文环境。 每个 Angular 应用都至少有一个 NgModule 类，也就是根模块，它习惯上命名为 AppModule，并位于一个名叫 app.module.ts 的文件中。引导这个根模块就可以启动你的应用。 大多数应用有很多特性模块，（即有多个NgModule），比如一些需求模块的组件会有自己的NgMo
Angular2学习笔记——详解NgModule模块
11-28
一个 NgModule 是通过使用 `@NgModule` 装饰器来定义的类，它包含一个元数据对象，该对象告诉Angular如何编译和运行代码。在Angular的模块化设计中，模块允许我们将应用分解为更小、更可管理的部分，从而提高了代码...
Angular2 NgModule 模块详解
09-01
在Angular2中，NgModule是应用程序的核心构造块，用于组织代码并定义组件、指令、管道和服务等的集合。它促进了代码的高内聚和低耦合，使得应用的结构更加清晰和可维护。Angular2引入模块的概念，使得我们可以将相关...
angular quick start tutorial summary
Matrix
05-24 427
Angular Home angular.cn angular.io angular-in-memory-web-api Creat 你使用 CLI 创建了第二个组件 HeroesComponent。 ng generate component heroes 你把 HeroesComponent 添加到了壳组件 AppComponent 中，以便显示它。 app.com...
ngmodule模块基本说明
zyzhan
12-20 747
@NgModule 元数据 NgModule 是一个带有 @NgModule() 装饰器的类。 declarations（可声明对象表） —— 那些属于本 NgModule 的组件、指令、管道。 exports（导出表） —— 那些能在其它模块的组件模板中使用的可声明对象的子集。 imports（导入表） —— 那些导出了本模块中的组件模板所需的类的其它模块。 providers ...
Angular结构简单介绍
weixin_34319999的博客
03-05 101
在当前项目目录下，使用Angular-CLI生成一个组件：heroes ng generate component heroes          主界面（也就是一个主模块+多个单模块，例如我们创建的heroes(单模块也有自己的html\css\ts文件，可以在主页面导入它的视图)）： //类似CSS app.component.css //类似HTML ap...
Angular 常用概念
weixin_34129145的博客
01-26 122
1.模块与装饰器 Angular设计目标就是适应大型应用的开发，模块的概念就是来组织不同的组件及服务。一个大型应用的最终形态就是各种不同的模块的组合 import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform...
理解 NgModule 元数据数组的深层语义与实践策略
最新发布
2007 年 ~ 2025 年，深耕 SAP 技术 18 年
05-09 918
imports决定“我依赖什么”，exports告诉“我愿意共享什么”，声明“我具体拥有什么可编译实体”，providers负责“我如何在运行期提供依赖”。理解四者边界后，既能写出模块粒度清晰、依赖关系透明的应用，也能利用懒加载、分包和定制化注入器优化性能与测试体验。只要记住：编译期关注模板可见性（imports / declarations / exports），运行期聚焦依赖注入作用域（providers），整个模块系统便可随项目规模伸缩自如。
Angular 核心知识 使用笔记
Wu_shuxuan的博客
09-08 814
angular 结构性指令 语法糖 【*】 常用的angular语法糖有： *ngif,*ngfor… <mat-icon *ngIf="task.reminder">alarm</mat-icon> 相当于 => <ng-template [ngIf]="task.reminder"> <mat-icon >alarm</mat-icon> </ng-template> angu
元数据metadata
weixin_34192816的博客
01-08 2142
1. 什么是元数据 任何文件系统中的数据分为数据和元数据。数据是指普通文件中的实际数据，而元数据指用来描述一个文件的特征的系统数据，诸如访问权限、文件拥有者以及文件数据块的分布信息(inode...)等等。在集群文件系统中，分布信息包括文件在磁盘上的位置以及磁盘在集群中的位置。用户需要操作一个文件必须首先得到它的元数据，才能定位到文件的位置并且得到文件的内容或相关属性。 2．...
Angular 模块 (NgModule)
Jinmy的博客
07-27 3959
Angular 模块 (NgModule) NgModule 是一个带有 @NgModule 装饰器的类。 Angular 模块把组件、指令和管道打包成内聚的功能块，每个模块聚焦于一个特性区域、业务领域、工作流或通用工具。 NgModule 的元数据会做这些： 声明某些组件、指令和管道属于这个模块。 公开其中的部分组件、指令和管道，以便其它模块中的组件模板中可以使用它们。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

yusirxiaer

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值