今天完成的事情：

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 属性一样，因此得名“属性型指令”