Angular 0基础上手之新手村-----Tour of Heroes

新手村第一步之搭建angular项目

首先，我们需要提前配置好node环境，以及npm。在这之后我们安装angular cli。
使用脚手架在终端搭建一个angular项目：

ng new angular-tour-of-heroes

进行一些选项，我们这里使用Scss，进入到项目文件后
接着使用命令 ng serve --open 启动服务。

现在我们就可以开始英雄之旅了：

新手村第二步之创建英雄列表组件

首先利用ng generate component heroes快速为app创建一个子组件，于是我们可以看到有四个文件

添加 hero 属性 hero = 'Windstorm';

显示heroes组件视图

真实的英雄当然不止一个名字，我们还可以添加一个类。
先在app中创建一个Hero.ts文件，写入

export interface Hero {
   
    id: number,
    name: string
}

第二步，在heroes.component.ts中引入

import {
    Hero } from '../hero';

第三步，更改ts中的代码

hero: Hero = {
   
    id: 1,
    name: 'Windstorm'
  } 

此刻页面会显示

显然是不正确的。我们需要更改hero对象的显示。

<p>{
  {hero.id}}</p>
<p>{
  {hero.name}}</p>

此外还可以使用 UppercasePipe 进行格式化

<p>{
  {hero.id}}</p>
<p>{
  {hero.name | uppercase}}</p>

浏览器刷新了。现在，英雄的名字显示成了大写字母。

绑定表达式中的 uppercase 位于管道操作符 | 后面，用来调用内置管道 UppercasePipe。

管道 是格式化字符串、金额、日期和其它显示数据的好办法。Angular 发布了一些内置管道，而且你还可以创建自己的管道。

ngModel 双向数据绑定

打开 app.module.ts 并从 @angular/forms 库中导入 FormsModule 符号。

import {
    FormsModule } from '@angular/forms'; // <-- NgModel lives here

然后把 FormsModule 添加到 @NgModule 的 imports 数组中，这里是该应用所需外部模块的列表。

imports: [
  BrowserModule