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

Question

我一直在观看视频和阅读文章，但这篇specific article让我很困惑，在文章的开头就说了

  

Angular中的应用程序遵循模块化结构。 Angular应用程序将包含许多模块，每个模块专用于单一用途。通常，模块是一个有凝聚力的代码组，它与其他模块集成以运行Angular应用程序。

     

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

     

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

他们是可以交换的条款吗？组件是模块吗？但不是反之亦然？

Answer 1

组件控制视图（html）。他们还与其他组件和服务进行通信，为您的应用程序带来功能。

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

Answer 2

嗯，发布答案为时已晚，但我想 easy 了解谁是 Angular 的初学者。我在演讲中给出的例子之一。

将您的角度应用程序视为 Building 。建筑物中可以包含 N 个 Apartments 。 Apartment 被视为 Module 。公寓可以具有 N 个 rooms 数目，这些数目对应于名为 Components的Angular应用程序的构造块/ strong>。

现在每个 Apartment (Module) 将具有 Rooms (Components) ， Lifts (Services) ，以允许在和出公寓， Wires (Pipes) 来移动信息并使其在公寓中有用。

您还将拥有诸如 swimming pool, tennis court 之类的场所，这些场所将由所有建筑物居民共享。因此，这些可以被视为SharedModule内部的组件。

基本上，区别如下，

跟随我的幻灯片了解building blocks of an Angular application

Answer 3

角度组件

A component是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';
}

要在此处创建组件或角度应用，请tutorial

角度模块

angular module是一组角度基本构建模块，如component，directives，services等。应用可以有多个模块。

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

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

Answer 4

最简单的解释：

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

组件包含：

• HTML模板或HTML代码

• 代码（TypeScript）

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

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

。

Answer 5

一张图片值得一千个单词！

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

“构建”一个应用。

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

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

关于Angular模块，它是一种机制：

1-组组件（还有服务，指令，管道等...）

2-定义其依赖性

3-定义其可见性。

使用类（通常为空）和NgModule装饰器简单地定义Angular模块。

Answer 6

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

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

Answer 7

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