https://juejin.cn/post/7033690420899135519
app.component.ts
这其实需要当做一个整体来看,上面一段被称作装饰器,用于装饰AppComponent这个class,这个装饰器的作用是:
- 定义组件的选择器,即如何引用组件,相当于组件的id
- 定义组件的html文件
- 定义组件的样式文件
PS:装饰器中的这些数据又有一个比较好听的名字:元数据。
通过这个装饰器,这个组件就能够被解析器知晓如何组装、使用,从而顺利编译成可用代码。比如可以在html中通过
app.module.ts
和组件类似,模块也需要定义元数据。特殊的是,一个应用至少有一个模块,其中最顶层的模块又被称作根模块,就像树形图那样。
看上去似乎和app.component.ts长得一毛一样,同样是导入几个包,写个装饰器。和组件不同的是,模块似乎导入了一些Module文件。
import { BrowserModule } from ‘@angular/platform-browser’;
如果你的app运行在浏览器中,那么这个模块属于必须项,它提供了大量浏览器下需要用到的功能。
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
这个装饰器定义了本模块的元数据,其中
- declarations:用于申明这个模块用到的组件
- imports:用于申明这个模块用到的其他模块
- providers:用于申明模块用到的服务
- bootstrap:用于申明应用入口,只有根模块才能使用