Angular官网学习1：Angular入门，你的第一个应用（1）

创建一个新项目

在StackBlitz上创建一个新项目（此链接里已添加一个包含商品名称和结账图标的顶栏，以及商品列表的标题，可直接预览代码运行结果）

1、展示商品列表

（1）在 product-list 文件夹中，打开模版文件product-list.component.html。
（2）修改 product-list.component.html，列出所有商品的名称：这里用到了*ngFor指令，该指令会使每个商品都被渲染出来（*ngFor 是一个 “结构型指令”。结构型指令会通过添加、删除和操纵它们的宿主元素等方式塑造或重塑 DOM 的结构。任何带有 * 的指令都是结构型指令。）

product-list.component.html中

<h2>Products</h2>

<div *ngFor="let product of products">
</div>

（3）要显示商品的名称，用到插值语法{{}},在div里，添加一个h3标题，来显示商品name的属性值

product-list.component.html中

<h2>Products</h2>

<div *ngFor="let product of products">

  <h3>
      {{ product.name }}
  </h3>

</div>

运行后结果如下

（4）添加商品链接，使用属性绑定语法 [] 把该链接的 title 设置成该商品的名字

product-list.component.html中

<h2>Products</h2>

<div *ngFor="let product of products">

  <h3>
    <a [title]="product.name + ' details'">
      {{ product.name }}
    </a>
  </h3>

</div>

（5）添加商品说明：在 p 标签上，使用 *ngIf 指令，这样才能在当前商品有描述信息的情况下创建这个 p 元素。

product-list.component.html中

<h2>Products</h2>

<div *ngFor="let product of products">

  <h3>
    <a [title]="product.name + ' details'">
      {{ product.name }}
    </a>
  </h3>

  <p *ngIf="product.description">
    Description: {{ product.description }}
  </p>

</div>

运行后结果如下（最后一个product无描述）：

（6）添加一个按钮，让用户可分享商品，使用事件绑定（事件绑定是通过把事件名称包裹在圆括号 () 中完成的）

product-list.component.html中

<h2>Products</h2>

<div *ngFor="let product of products">

  <h3>
    <a [title]="product.name + ' details'">
      {{ product.name }}
    </a>
  </h3>

  <p *ngIf="product.description">
    Description: {{ product.description }}
  </p>

  <button (click)="share()">
    Share
  </button>

</div>

运行后结果如下：

点击share按钮：

此时具有商品列表展示和共享功能，其中有Angular模版语法的五个常用特性：*ngFor， *ngIf, 插值表达式{{ }}, 属性绑定[ ], 事件绑定: ( )。