发表于: 2021-02-01 23:54:55
1 1023
今天完成的事情:
1-angular模块
NgModule 和 JavaScript 的模块
JavaScript 中,每个文件是一个模块,文件中定义的所有对象都从属于那个模块。 通过 export 关键字,模块可以把它的某些对象声明为公共的。 其它 JavaScript 模块可以使用import 语句来访问这些公共对象
如在app.module.ts中声明公共标题
Angular 自带库
Angular 会作为一组 JavaScript 模块进行加载,你可以把它们看成库模块。每个 Angular 库的名称都带有 @angular 前缀
2-angular组件
组件控制屏幕上被称为视图的一小片区域
组件的元数据:
@Component 装饰器会指出紧随其后的那个类是个组件类,并为其指定元数据
selector:是一个 CSS 选择器,一旦在模板 HTML 中找到了这个选择器对应的标签,就创建并插入该组件的一个实例
如, HTML 中包含 <app-new></app-new>,Angular 就会标签中插入一个 NewsComponent 实例的视图
templateUrl:组件的 HTML 模板文件相对于这个组件文件的地址,定义了该组件的宿主视图
styleUrls:组件CSS的地址
providers:当前组件所需的服务提供者的一个数组
模板与视图
你要通过组件的配套模板来定义其视图。模板就是一种 HTML,它会告诉 Angular 如何渲染该组件
视图通常会分层次进行组织,让你能以 UI 分区或页面为单位进行修改、显示或隐藏。 与组件直接关联的模板会定义该组件的宿主视图。该组件还可以定义一个带层次结构的视图,它包含一些内嵌的视图作为其它组件的宿主
模板语法
HTML元素+Angular模板语法。模板语法可以根据应用逻辑、应用状态和 DOM 数据来修改这些 HTML。 模板可以使用数据绑定来协调应用和 DOM 中的数据,使用管道在显示出来之前对其进行转换,使用指令来把程序逻辑应用到要显示的内容上
如:
ul, li,h1,button是HTML元素
*ngFor,{{keywords}},(click)是Angular模板语法元素
*ngFor: 指令 Angular 在一个列表上进行迭代
{{keywords}}、(click) :把程序数据绑定到及绑定回 DOM,以响应用户的输入
数据绑定
双向数据绑定(主要用于模板驱动表单中),它会把属性绑定和事件绑定组合成一种单独的写法
管道
Angular 的管道可以让你在模板中声明显示值的转换逻辑。 带有 @Pipe 装饰器的类中会定义一个转换函数,用来把输入值转换成供视图显示用的输出值
指令:
1. 结构型指令
结构型指令通过添加、移除或替换 DOM 元素来修改布局
如:判断添加显示图片
2. 属性型指令
属性型指令会修改现有元素的外观或行为。 在模板中,它们看起来就像普通的 HTML 属性一样,因此得名“属性型指令”
评论