https://juejin.cn/post/7033690420899135519Angular踩坑之路——基础篇 - 图1
image.png

app.component.ts

image.png
这其实需要当做一个整体来看，上面一段被称作装饰器，用于装饰AppComponent这个class，这个装饰器的作用是：

  1. 定义组件的选择器，即如何引用组件，相当于组件的id
  2. 定义组件的html文件
  3. 定义组件的样式文件

PS：装饰器中的这些数据又有一个比较好听的名字：元数据。
通过这个装饰器，这个组件就能够被解析器知晓如何组装、使用，从而顺利编译成可用代码。比如可以在html中通过使用选择器为app-root的组件。

app.module.ts

和组件类似，模块也需要定义元数据。特殊的是，一个应用至少有一个模块，其中最顶层的模块又被称作根模块，就像树形图那样。
image.png
看上去似乎和app.component.ts长得一毛一样，同样是导入几个包，写个装饰器。和组件不同的是，模块似乎导入了一些Module文件。
import { BrowserModule } from ‘@angular/platform-browser’;
如果你的app运行在浏览器中，那么这个模块属于必须项，它提供了大量浏览器下需要用到的功能。

  1. @NgModule({
  2.   declarations: [AppComponent],
  3.   imports: [BrowserModule],
  4.   providers: [],
  5.   bootstrap: [AppComponent]
  6. })
  7. export class AppModule {}

这个装饰器定义了本模块的元数据，其中

  • declarations：用于申明这个模块用到的组件
  • imports：用于申明这个模块用到的其他模块
  • providers：用于申明模块用到的服务
  • bootstrap：用于申明应用入口，只有根模块才能使用