【Angular2】Tour of Hero 部分理解

背景

由于负责项目中Angular2的端对端测试和单元测试，所以需要掌握一定Angular的知识

同时还需要学习Typescript，Karma，Jasmine，Protractor一些相关知识

现在需要一些简单的项目来熟悉Angular2的运转，官方的Tour of Hero就是一个不错的上手项目

 

功能说明

该系统的功能简单来说就是：列表显示英雄，点击查看并可以修改英雄的信息

 

知识点

1.module和component

最开始会在module和component里面编写代码，在看完架构的文档之后，从字面上知道了他们在干什么，但是还是有点云里雾里

目前理解，component是组件，可以把它理解为函数方法，因为有输入有输出，不过它的输出是在页面。所以也就有了官网上的组件控制屏幕上的一小块区域。

module是模块，用来打包那些组件

可以类比一个控制台程序，我们有根模块main，也有其他的类模块，相关模块封装自己了自己函数组件

---

2.npm start

在建立了项目之后，我们需要运行自己的程序。

这里，在cmd窗口中cd到该项目下，然后使用这个命令，项目就启动了

它的好处是代码变化后会自动编译，浏览器会自动刷新

---

3.模板和插值表达式

组件要在页面呈现出一部分内容，说到底是一些HTML代码，所以模板就是充当HTML的

但是每次呈现不是一样的东西，不一样的数据，一样的是结构样式，这里的结构样式用的就是模板

那些每次不一样，变化的数据用的 插值表达式 ，像一个变量插入到HTML代码中

---

4.双向绑定

使用插值表达式，使得组件里面的数据改变，页面和跟着改变

那么如果用双向绑定之后，在页面改变数据，组件里的也会跟着改变

记得要在模块里引用FormsModule，双向绑定需要这个

---

5.ngFor

这是个迭代输出函数，迭代出每一个英雄对象，通过插值表达式把id和name放在每一条span中

源码：

<li *ngFor="let hero of heroes">  <span class="badge">{{hero.id}}</span> {{hero.name}}</li>

输出后：

<li _ngcontent-c0="">    <span _ngcontent-c0="" class="badge">11</span> Mr. Nice</li><li _ngcontent-c0="">    <span _ngcontent-c0="" class="badge">12</span> Narco</li><li _ngcontent-c0="">    <span _ngcontent-c0="" class="badge">13</span> Bombasto</li>... 英雄信息在li标签的遍历 ...

---

 

小结

在Angular2学习中，无论是从基本语法还是设计架构，都有很多新鲜的知识需要学习

但是随着一点一滴的积累，相信之后会有很好的应用