Angular入门-装饰器

来源:互联网 发布:cnc数控编程好学吗 编辑:程序博客网 时间:2024/06/03 18:41

查看Angular英文版官网的文档,里面的描述太少,都没声明NgModule装饰器是干嘛用的,只介绍了元数据。在Angular中文官网中,核心知识 有详细介绍,才明白Angular通过装饰器也就是带@的东东,去定义组件、模块、指令等,下面只作粗略的笔记:

架构

我们是这样写 Angular 应用的:用 Angular 扩展语法编写 HTML 模板, 用组件类管理这些模板,用服务添加应用逻辑, 用模块打包发布组件与服务。
然后,我们通过引导根模块来启动该应用。 Angular 在浏览器中接管、展现应用的内容,并根据我们提供的操作指令响应用户的交互。

这里涉及到几个名词:
HTML模板组件类服务模块组件指令

容易混淆的是模块组件。从设计上来看,组件(Compoment)强调复用,具有一定依赖性。就像零件一样,一颗螺丝,螺丝帽分别是一个零件。模块(Module)强调职责(内聚、分离),可独立运行的。

1.Angular 模块

都是一个带有@NgModule装饰器的类,且约定类名以Module为后缀。(Angular模块库:每个 Angular 库的名字都带有@angular前缀)
这里写图片描述

2.Angular 组件

都是一个带有@Component装饰器的类,且约定类名以Compoment为后缀。
2.1组件有生命周期(创建、更新和销毁),通过生命周期钩子可以在各个状态上插入自己的操作,如初始化ngOnInit()。
2.1组件有HTML文件作为视图模板。selector:”app-dashboard”定义此模板在父级模板的位置,templateUrl指向组件模板。
这里写图片描述
其他名称概念请前往中文官网 核心知识查看,都写得很详细。

原创粉丝点击