Angular术语概念的理解
装饰器(Decorator)
装饰器是一种设计模式,其主要应用场景是动态的将多个责任附加到一个对象上
,这是一种比继承更有弹性的面对对象设计方法,缺点是代码中会出现大量的小类。
Angular中定义了许多装饰器,他们是用于修饰 JavaScript 类的函数,用来将各种功能零件装饰在一个个类上
。具体的实现方式是把一些特定用途的组件以预定义的方式附加到类上,组合成一个拥有完整功能的模块,以便于 Angular 框架了解这些这些类的含义并知道如何调用它们。
模块(NgModule)
Angular中的模块本质上是存放一些内聚代码块的容器
,一个模块相当于一个功能单元,它们分别专注于某个功能或者工作流程,比如登录注册功能可以作为一个模块。Angular项目中所有模块会被组装成一棵树
,树的根节点是AppModule
。Angular的模块和 JavaScript中的模块不同,但是有一定的互补性。
Angular中定义一个模块的方法是通过使用@NgModule
装饰器装饰一个类,@NgModule
装饰器为一个模块声明了编译的环境,即其作用域由@NgModule
定义。例如,我们可以导入一些由其它模块中导出的功能,并导出一些指定的功能供其它模块使用。
@NgModule
的一些属性:
- declarations(可声明对象表) —— 那些属于本模块的零件(组件、指令、管道)。
- exports(导出表) —— 那些能在其它模块中使用的零件(组件、指令、管道)。
- imports(导入表) —— 那些导出了本模块中需要使用的其它模块。
- providers —— 声明的服务可以在本模块或者本组件中使用。
- bootstrap —— 它是应用的主视图,是所有其它组件的根。只有根模块才应该设置。
// 一个用户模块的例子,模块使用@NgModule装饰
@NgModule({
declarations: [ UserMainComponent, WritePostComponent ],
exports: [UserMainComponent],
imports:[CommonModule,ReactiveFormsModule,SharedModule,PostSharedModule,RouterModule.forChild(userRoutes)],
providers: [PostTableService]
})
export class UserModule {
}
组件(Component)
Angular中的视图指的是最终显示在浏览器上的整个页面或页面的一部分。一块视图由组件类和模板构成,即一个组件类+一个模板=一块视图
。一个组件通常是指组件类+模板
。一个组件可以作为标签来嵌入到其他模板中,以此来形成一个有复杂层次的视图结构。
Angular中定义一个组件类的方式是通过@Component
装饰器修饰一个类,这个类包含了与模板交互所需的数据和逻辑。模板是一个通过@Component
装饰器与模板类绑定的html文件。
当Angular创建、更新、销毁一些组件时。我们可以通过重写生命周期钩子方法的方式,来在每个特定的时机执行特定的业务逻辑。
常用的 @Component 配置选项:
- selector:是一个 CSS 选择器,它会告诉 Angular,一旦在HTML模板中找到了这个选择器对应的标签,就创建并插入该组件的一个实例。例如,如果HTML中包含 ,Angular 就会在这些标签中插入一个 HeroListComponent 实例的视图。
- templateUrl:是该组件的HTML 模板文件相对于这个组件类的地址引用。另外,还可以用 template 属性的值来直接填入HTML 模板代码。
- providers 是当前组件所需要的服务的数组。
@Component({
selector: 'app-hero-list',
templateUrl