Angular组件和模块之间有什么区别


184

我一直在看视频和阅读文章,但是这篇特定的文章让我很困惑,在文章开头

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

模块从其代码中导出一些类,函数和值。组件是Angular的基本块,多个组件将组成您的应用程序。

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

它们可以互换吗?组件是模块吗?但是反之亦然吗?

Answers:


244

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

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


187

嗯,发布答案为时已晚,但是我认为很容易理解谁是Angular的初学者。以下是我在演示过程中提供的示例之一。

将您的角度应用程序视为建筑物。建筑物中可以包含N许多公寓。公寓被视为模块。然后,公寓可以具有N多个房间,这些房间对应于名为组件的Angular应用程序的构造块。

现在,每个公寓(模块)都将具有房间(组件),升降机(服务)以允许进出公寓的更大运动,电线(管道)来移动信息并使其在公寓中有用。

您还将拥有所有建筑物居民共用的游泳池,网球场等地方。因此,可以将它们视为SharedModule中的组件。

基本上,区别如下

该表显示了模块和组件之间的主要区别

跟随我的幻灯片了解Angular应用程序构建基块

这是我的会议 Building Blocks of Angular for beginners


71

在此处输入图片说明

最简单的解释:

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

一个组件包括:

  • HTML模板或HTML代码

  • 代码(TypeScript)

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

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


2
不为所有这些疯狂。是的,您的组件将使用服务,但是必须在模块的providers数组中指示该服务。您的图表未显示此内容。
斯科特,

我可以在一个组件内添加一个子模块,并向该模块添加几个组件吗?
Satrughna

39

角分量

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

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

并创建一个组件

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

要创建组件或角度应用程序,请参见教程

角度模块

一个角模块被设置角度基本构建块等的部件指令服务等应用程序可以有多于一个的模块。

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

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

14

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

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


9

https://blobscdn.gitbook.com/v0/b/gitbook-28427.appspot.com/o/assets%2F-L9vDDYxu6nH7FVBtFFS%2F-LBvB_WpCSzgVF0c4R9W%2F-LBvCVC22B-3Ls3_nyu-%=media.Fang 624c03ca-e24f-457d-8aa7-591d159e573c

一张图片胜过千言万语 !

Angular的概念非常简单。它建议使用“砖块”-> 模块来“构建”应用程序

这个概念可以更好地构造代码并促进重用和共享。

注意不要将Angular模块与ES2015 / TypeScript模块混淆。

关于Angular模块,它是用于以下目的的机制:

1组组件(还包括服务,指令,管道等...)

2-定义他们的依赖

3-定义其可见性。

只需使用类(通常为空)和NgModule装饰器定义Angular模块。


5

组件为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以便您可以具有可以独立运行的功能块。例如,一个应用程序可以具有功能模块,用于将应用程序特定功能的组件(例如仪表板)分组,您可以在另一个应用程序内部简单地抓取并使用它们。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.