1. 显示数据
在 Angular 中最典型的数据显示方式，就是把 HTML 模板中的控件绑定到 Angular 组件的属性。
使用插值表达式显示组件属性
要显示组件的属性，最简单的方式就是通过插值表达式 (interpolation) 来绑定属性名。 要使用插值表达式，就把属性名包裹在双花括号里放进视图模板，如 {{myHero}}。
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
{{title}}
My favorite hero is: {{myHero}}
`
})
export class AppComponent {
title = 'Tour of Heroes';
myHero = 'Windstorm';
}注意
- 这里直接使用的 template，而不是templateUrl，template可以直接书写html代码，简单的html推荐这种方式
- @Component 装饰器中指定的 CSS 选择器 selector，它指定了一个叫 my-app 的元素。 该元素是 index.html 的 body 里的占位符。
#src/index.html (body)
内联 (inline) 模板还是模板文件？
angular提供两种地方存放组件模板
- 你可以使用 template 属性把它定义为内联的，
- 或者把模板定义在一个独立的 HTML 文件中， 再通过 @Component 装饰器中的 templateUrl 属性， 在组件元数据中把它链接到组件
到底选择内联 HTML 还是独立 HTML 取决于个人喜好、具体状况和组织级策略。 上面的应用选择内联 HTML ，是因为模板很小，而且没有额外的 HTML 文件显得这个演示简单些。
为数据创建一个类
使用angular提供的cli：
ng generate class hero修改src/app/hero.ts
export class Hero {
constructor(
public id: number,
public name: string) { }
}使用这个类：
src/app/app.component.ts (heroes)：
heroes = [
new Hero(1, 'Windstorm'),
new Hero(13, 'Bombasto'),
new Hero(15, 'Magneta'),
new Hero(20, 'Tornado')
];
myHero = this.heroes[0];
template: `
{{title}}
My favorite hero is: {{myHero.name}}
Heroes:
-
{{ hero.name }}
`在模板里可以自己使用.语法，访问对象属性
使用 ngFor 显示数组属性
*ngFor 是 Angular 的“迭代”指令。 它将 元素及其子级标记为“迭代模板”.，同vue.js里的v-for
export class AppComponent {
title = 'Tour of Heroes';
heroes = ['Windstorm', 'Bombasto', 'Magneta', 'Tornado'];
myHero = this.heroes[0];
}
template: `
{{title}}
My favorite hero is: {{myHero}}
Heroes:
-
{{ hero }}
·不要忘记
*ngFor中的前导星号(*)。它是语法中不可或缺的一部分
通过 NgIf 进行条件显示
有时，应用需要只在特定情况下显示视图或视图的一部分,这个时候使用ngif，同vue.js里的v-if
There are many heroes!
小结
- 带有双花括号的插值表达式 (interpolation) 来显示一个组件属性
- 用 ngFor 显示数组
- 用一个 TypeScript 类来为你的组件描述模型数据并显示模型的属性
- 用 ngIf 根据一个布尔表达式有条件地显示一段 HTML。
2. 模板语法
Angular 应用管理着用户之所见和所为，并通过 Component 类的实例（组件）和面向用户的模板来与用户交互。
在 Angular 中，组件扮演着控制器或视图模型的角色，模板则扮演视图的角色。
### 模板中的 HTML
HTML 是 Angular 模板的语言。几乎所有的 HTML 语法都是有效的模板语法。 但值得注意的例外是