今天完成的事情：（一定要写非常细致的内容，比如说学会了盒子模型，了解了Margin） 
明天计划的事情：（一定要写非常细致的内容） 
遇到的问题：（遇到什么困难，怎么解决的） 
收获：（通过今天的学习，学到了什么知识)

1.制作英雄指南

        （1）更改应用标题

              打开组件的类文件 (app.component.ts)，并把 title 属性的值修改为 'Tour of Heroes' （英雄指南）。

                  title = 'Tour of Heroes';

              打开组件的模板文件 app.component.html 并清空 Angular CLI 自动生成的默认模板。改为下列 HTML 内容：

                  <h1>{{title}}</h1>

              {{}}双花括号语法是 Angular 的插值绑定语法。 这个插值绑定的意思是把组件的 title 属性的值绑定到 HTML 中的 h1 标记中。浏览器自动刷新，并且显示出了新的应用标题。

        （2）添加应用样式

              大多数应用都会努力让整个应用保持一致的外观。 因此，CLI 会生成一个空白的 styles.css 文件。 可以把全应用级别的样式放进去。

2.@Component 是个装饰器函数，用于为该组件指定 Angular 所需的元数据。

        CLI 自动生成了三个元数据属性：

             selector— 组件的选择器（CSS 元素选择器）

             templateUrl— 组件模板文件的位置。

             styleUrls— 组件私有 CSS 样式表文件的位置。

       CSS 元素选择器 app-heroes 用来在父组件的模板中匹配 HTML 元素的名称，以识别出该组件。

       ngOnInit 是一个生命周期钩子，Angular 在创建完组件后很快就会调用 ngOnInit。这里是放置初始化逻辑的好地方。

       始终要 export 这个组件类，以便在其它地方（比如 AppModule）导入它。

3.双向绑定

   （1） 把模板中的英雄详情区重构成这样：

        <div>

          <label>name:

            <input [(ngModel)]="hero.name" placeholder="name"/>

          </label>

        </div>

    [(ngModel)] 是 Angular 的双向数据绑定语法。

    这里把 hero.name 属性绑定到了 HTML 的 textbox 元素上，以便数据流可以双向流动：从 hero.name 属性流动到 textbox，并且从 textbox 流回到 hero.name 。

    （2）虽然 ngModel 是一个有效的 Angular 指令，不过它在默认情况下是不可用的。

             它属于一个可选模块 FormsModule，你必须自行添加此模块才能使用该指令。

4.Angular 需要知道如何把应用程序的各个部分组合到一起，以及该应用需要哪些其它文件和库。 这些信息被称为元数据（metadata）。

    有些元数据位于 @Component 装饰器中，你会把它加到组件类上。 另一些关键性的元数据位于 @NgModule 装饰器中。

    最重要的 @NgModule 装饰器位于顶级类 AppModule 上。

5.*ngFor 是一个 Angular 的复写器（repeater）指令。 它会为列表中的每项数据复写它的宿主元素。

6.添加 click 事件绑定

往 <li> 元素上插入一句点击事件的绑定代码：

<li *ngFor="let hero of heroes" (click)="onSelect(hero)">

这是 Angular 事件绑定 语法的例子。

click 外面的圆括号会让 Angular 监听这个 <li> 元素的 click 事件。 当用户点击 <li> 时，Angular 就会执行表达式 onSelect(hero)。

7.Angular 的 CSS 类绑定机制让根据条件添加或移除一个 CSS 类变得很容易。 只要把 [class.some-css-class]="some-condition" 添加到你要施加样式的元素上就可以了。