Angular的组件和模块有什么区别

我一直在看视频和阅读文章,但这个具体的文章让我很困惑,在文章的开头它说

Angular中的应用遵循模块化结构。Angular的应用程序将包含许多模块,每个模块都专注于一个目的。通常,模块是一组内聚的代码,它与其他模块集成在一起来运行Angular应用。

模块从代码中导出一些类、函数和值。组件是Angular的一个基本块,多个组件组成了你的应用

一个模块可以是另一个模块的库。例如,Angular的一个主要库模块angular2/core库将被另一个组件导入。

它们是可交换的条件吗?组件是模块吗?但反过来不是吗?

163509 次浏览

组件控制视图(html)。它们还与其他组件和服务通信,为应用程序带来功能。

模块由一个或多个组件组成。它们不控制任何html。你的模块声明了哪些组件可以被属于其他模块的组件使用,哪些类将被依赖注入器注入,哪些组件将被引导。模块允许你管理你的组件,为你的应用程序带来模块化。

Angular 2中的模块是由组件、指令、服务等组成的。一个或多个模块组合成一个应用程序。模块将应用程序分解成逻辑代码块。每个模块执行一个单独的任务。

Angular 2中的组件是你为想要显示的页面编写逻辑的类。组件控制视图(html)。组件与其他组件和服务通信。

角组件

一个组件是Angular应用的基本构建块之一。一个应用可以有多个组件。在一个正常的应用程序中,一个组件包含一个HTML视图页面类文件,一个类文件控制HTML页面的行为和CSS/scss文件样式你的HTML视图。组件可以使用@Component装饰器创建,该装饰器是@angular/core模块的一部分。

import { Component } from '@angular/core';

并创建一个组件

@Component({selector: 'greet', template: 'Hello \{\{name}}!'})
class Greet {
name: string = 'World';
}

在这里创建一个组件或angular应用程序是教程

角模块

角模块是由组件指令服务等angular基本构建块组成的集合。一个应用程序可以有多个模块。

模块可以使用@NgModule装饰器创建。

@NgModule({
imports:      [ BrowserModule ],
declarations: [ AppComponent ],
bootstrap:    [ AppComponent ]
})
export class AppModule { }

组件是the template(view) + a class (Typescript code) containing some logic for the view + metadata(to tell angular about from where to get data it needs to display the template)

模块basically group the related components, services together,这样你就可以拥有可以独立运行的功能块。例如,一个应用程序可以有功能模块,为应用程序的特定功能分组组件,例如仪表板,你可以简单地抓取并在另一个应用程序中使用。

现在发表答案已经太迟了,但我觉得我的解释对Angular初学者来说很容易理解。下面是我在演讲中举的一个例子。

把你的angular应用程序看作一个建筑。一栋建筑可以有N个公寓。公寓被认为是一个模块。一个Apartment可以有N个数的房间,这些房间对应于Angular应用名为components的构建块。

现在,每个公寓(模块)都将有房间(组件),电梯(服务),以便更大的进出公寓,电线(管道)转换,使其在公寓中有用。

你也会有游泳池,网球场,这些都是由所有居民共享的。所以这些可以被认为是SharedModule中的组件。

基本上,区别如下:

 Module and Component key differences Table .

这是我在< >强Building Blocks of Angular for beginners < / >强上的会话

跟随我的幻灯片来理解Angular应用的构建块

enter image description here

最简单的解释:

模块就像一个大容器,包含一个或多个小容器,称为组件,服务,管道

组件包含:

  • HTML模板或HTML代码

  • < p >代码(打印稿)

  • 服务:它是一个可重用的代码,由组件共享,以便 不需要重写代码

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

< p >参考: https://scrimba.com/ < / p >

https://blobscdn.gitbook.com/v0/b/gitbook-28427.appspot.com/o/assets%2F-L9vDDYxu6nH7FVBtFFS%2F-LBvB_WpCSzgVF0c4R9W%2F-LBvCVC22B-3Ls3_nyuC%2Fangular-modules.jpg?alt=media&token=624c03ca-e24f-457d-8aa7-591d159e573c

一幅图胜过千言万语!

Angular的概念非常简单。它提议用“砖块”“构建”一个应用程序-> < em >模块。< / em >

这个概念使得更好地构造代码并促进重用和共享成为可能。

注意不要把Angular模块和ES2015 / TypeScript模块混淆

对于Angular模块,它是一种机制:

1-分组组件(还包括服务、指令、管道等)

2-定义它们的依赖关系

3-定义他们的可见性。

Angular模块是用一个类(通常为空)和NgModule装饰器简单定义的。