angular中Module与Component

什么是模块

Module, 中文为模块或模组。

它的核心意义是分离职责，属于代码级模块化的产出。本身是一组具有一定内聚性代码的组合，职责明确。对外的接口可以是松散的，也可以是集中的。

SEI的定义如下: An implementation unit of software that provides a coherent set of responsibilities. 它以问题分解的形式，来解决软件设计问题。它更强调一个内聚的概念，形式上可以是Java中的包，也可以是一个源代码目录。

// 这是一个模块的例子
@NgModule({
  imports: [..., AModule]
})
export class AppModule { }
 

什么是组件

Component，中文称为组件，或者构件。

使用非常比较广泛，它的核心意义在于复用，相对模块，对于依赖性有更高的要求。 我大概整理了一下，两个定义 (参考Component based software programming): 可以复用的模块，概念上与模块基本等同，只是明显有依赖性的要求。

// 这是一个组件的例子
@Component({
  selector: 'my-app',
  template: `
      <h1>Hello {{name}}</h1>
      <a-comp></a-comp>
  `
})
export class AppComponent { }
 

模块与组件的关系

// 模块与组件的关系
|--app.module.ts(模块)
 |--app.component.ts(组件)
  |--app.component.html(HTML模板)
  |--app.component.css(CSS样式表)
 

angular 初始化的项目有根模块和一个组件。你可以继续给根模块添加组件（当然项目大一些就不方便维护），也可以给根模块继续挂新的模块，然后在新的模块中添加组件，一个模块可以包含多个组件。

通俗点讲： 用树来形容，根模块-->树干; 子模块-->树枝；组件-->树叶。

是不是容易理解了呢，别忘了点赞哟。