【Angular4】英雄指南demo

快速上手

1.安装node.js和npm管理包
2.安装angular CLI,来创建angular应用
3.创建新的工作区 ng new my-app,进入工作区，启用服务器

应用的外壳

1.创建一个工作区 ng new 工作区名称，创建工作区和初始应用后
2. cd 工作目录 ng serve --open启用这个应用
3.看到的angular组件，就是整个应用的外壳
4.应用的外壳包含了三个基本文件，ts文件 ，html模板文件，css私有样式文件
5.可以开始创建第一个angular组件

英雄编辑器

1.创建组件ng generate component heroes heroes,生成了3个文件
.ts类文件
导入核心库，装饰器函数指定组件所需要的元数据（元素，模板，样式） exoprt类，用来给别的组件调用
export类里有一个构造函数和初始化逻辑函数
.html模板文件
将类的属性差值绑定的方式将内容显示在html界面，而组件的界面需要放到壳组件的模板中
.css 样式表文件

可以单独建立类文件生成属性字段
将类导入到组件的ts类文件中，在ts文件的export类中实例化类并赋值，界面上绑定类属性值来实现插值绑定。
但这仅仅是单向绑定，类的内容能够输出在界面上看到，界面无法改变类的属性值。
但可以通过双向绑定的方式，双向绑定的方式需要在模板中添加一个输入控件。
但要想引用输入控件，就需要添加该控件所在的模块。导入的位置原本是该组件的ts类文件。
导入对于关键性元素，需要添加到顶级类appMoudle中，并添加到@NgModule装饰器的import里。
在创建组件的过程中，会将组件的声明自动的添加到@NgModule的declarations中

显示英雄列表

1.通过手动添加类文件来模仿服务器获得的数据，将文件导入到heroes的组件里
2.在组件类中添加属性来接收类，用来暴露英雄类的内容
3. 通过使用*ngFor来在html模板中，遍历和显示一个数组中的内容
4.想要添加点击英雄，出现他的详细信息的功能，所以需要在html模板中为li元素添加点击事件,点击事件处理的是将从数组里所选中的英雄赋值给程序里的英雄变量
5.由于在程序中变量名意义修改了，所以改变英雄变量名称，但原来的变量名在最初显示英雄html时有引用，所以先将html模板中显示时引用的变量改为程序中的英雄变量
6.由于一开始没有选中，所以程序这时候会报错（修改这个错误，用到JavaScript，我不会，所以看不懂）
7.angularzhogn css类绑定机制非常的灵活，可以在运行过程中修改显示
8.最终，这一个组件上，先显示并添加点击后css的改变，再处理被点击后的效果！

主从组件

1.HeroesComponent 同时显示了英雄列表和所选英雄的详情，把英雄详情移入一个独立的、可复用的 HeroDetailComponent，创建组件hero-detail,生成3个文件
2.从 HeroesComponent 模板的底部把表示英雄详情的 HTML 代码剪切粘贴到所生成的 HeroDetailComponent 模板中
3.所粘贴的 HTML 引用了 selectedHero。 新的 HeroDetailComponent 可以展示任意英雄，因此还要把模板中的所有 selectedHero 替换为 hero。
4.为Hero添加一个@input装饰器,因为另一个组件会将内容绑定到hero上，在herocomponent中选择内容后，内容会被传到herodetailcomponent里
5.现在英雄详情被委托给 HeroDetailComponent 了，它和原来的HeroesComponent具有父子属性，把 添加到 HeroesComponent 模板的底部，以便把英雄详情的视图显示到那里。
6.把 HeroesComponent.selectedHero 绑定到该元素的 hero 属性，通过属性绑定语法来实现一种单向数据绑定，从 HeroesComponent 的 selectedHero 属性绑定到目标元素的 hero 属性，并映射到了 HeroDetailComponent 的 hero 属性。