angular当中模块和组件的区别

1.模块就像一个大容器,其中包含一个或多个名为Component,Service,Pipe的小容器.

2.组件是一个可以复用的ui单元,一个组件包括:

  • HTML模板或HTML代码

  • 代码(TypeScript)

  • 服务:这是组件共享的可重用代码,因此不需要重写代码

  • 管道:它将数据作为输入,并将其转换为所需的输出

  • 自己编写的组件内容,在页面上使用的时候必须让其包含于一个模块当中

3.模块存在的意义是啥?

NgModule 最根本的意义是帮助开发者组织业务代码,开发者可以利用 NgModule 把关系比较紧密的组件组织到一起,这是首要的。
NgModule 用来控制组件、指令、管道等的可见性,处于同一个 NgModule 里面的组件默认互相可见,而对于外部的组件来说,只能看到 NgModule 导出( exports )的内容,这一特性非常类似 Java 里面 package 的概念。也就是说,如果你定义的 NgModule 不 exports 任何内容,那么外部使用者即使 import 了你这个模块,也没法使用里面定义的任何内容。


NgModule 是 @angular/cli 打包的最小单位。打包的时候,@angular/cli 会检查所有 @NgModule 和路由配置,如果你配置了异步模块,cli 会自动把模块切分成独立的 chunk(块)。这一点是和其它框架不同的,其它框架基本上都需要你自己去配置 webpack,自己定义切分 chunck 的规则;而在 Angular 里面,打包和切分的动作是 @angular/cli 自动处理的,不需要你干预。当然,如果你感到不爽,也可以自己从头用 webpack 配一个环境出来,因为 @angular/cli 底层也是用的 webpack。
NgModule 是 Router 进行异步加载的最小单位,Router 能加载的最小单位是模块,而不是组件。当然,模块里面只放一个组件是允许的,很多组件库都是这样做的。
场景:假设你在做一个后台管理系统,这个管理系统有多个模块,每个模块的业务不一样,但是里面的组件逻辑却有点相似。比如A module里面有一个index 组件;B module 里面也有一个index组件。这样用module来管理各自的组件,可以保证维护者很清楚地知道这个组件组件是服务于哪个业务模块的,即便不小心引用错误也会有报错。

4.模块由哪几部分组成呢?

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

  • imports 导入其他的ngModule,基础依赖模块
  • declarations 该模块的依赖项,定义的本模块,需要依赖哪几个组件需要写到这里
  • entryComponents :Angular使用entryComponents来启用“树震动”,即只编译项目中实际使用的组件,而不是编译所有在ngModule中声明但从未使用的组件

  • providers  提供各种服务
  • bootstrap 根数组,angular 创建它,并插入index.html宿主页面
选项说明
providers?

在当前模块的注入器中可用的一组可注入对象。

declarations?

属于该模块的一组组件、指令和管道(统称可声明对象)。

imports?

这里列出的 NgModule 所导出的可声明对象可用在当前模块内的模板中。

exports?

此 NgModule 中声明的一组组件、指令和管道可以在导入了本模块的模块下任何组件的模板中使用。 导出的这些可声明对象就是该模块的公共 API。

entryComponents?

定义此 NgModule 中要编译的组件集,这样它们才可以动态加载到视图中。

bootstrap?

当该模块引导时需要进行引导的组件。列在这里的所有组件都会自动添加到 entryComponents 中。

schemas?

该 NgModule 中允许使用的声明元素的 schema(HTML 架构)。 元素和属性(无论是 Angular 组件还是指令)都必须声明在 schema 中。

id?

当前 NgModule 在 getModuleFactory 中的名字或唯一标识符。 如果为 undefined,则该模块不会被注册进 getModuleFactory 中。

jit?

如果存在,则该指令/组件将被 AOT 编译器忽略。它会保留在发布代码中,并且 JIT 编译器会尝试在运行时在浏览器中对其进行编译。为了确保其行为正确,该应用程序必须导入 @angular/compiler 。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值