angular---学习日记四(hero-demo)

这个是较为早点写的了，由于未能及时补充放在的草稿箱，现在补全发出，供大家参考。有哪里不对，请补充指教。

今天和带我的同事聊天问我，hero-demo怎么样了，我说跑起来了，是对的了，然后问的我用的是几，瞬间不知道该怎么回复了，因为我是直接在官网上学习的，并没有标注是几，同事告诉我现在公司的用的是4,作为新入职小白的我，赶紧百度了一下angular4，发现angular4和angular2是一样的，只不过4是2的升级，4加固和提升了2以及新增一些功能，在hero-demo上两者是一样的。故又重新做了一遍，下边是我的整个过程，记录下来，如果哪里有错，望大家指正。

1. 使用angular4的前提

使用angular4的前提是和angular一样的，可以参考我的学习日记一(安装+运行)，他们一致的原因是angular4是angular2 的升级。在这里也普及一下angular，目前已经出版的有angular1(angularjs),angular2,angular4,angular5(在路上)，angular1也就是angularJs则是完全利用的model-view-controler的纯Js编写的(基于JavaScript)，而angular2，angular4是利用组件实现的(基于TypeScript)，并且一直都在2的基础上升级，加快了速度，并且能够在mobile上较为方便的使用。

2. self-hero-demo的实现

在实现一个系统或者项目之前需要有一个明确的流程，所以我对hero-demo做了一个流程图。

从流程图中我们可以看到我们需要很多的条件。

  2.1 创建我们需要的组件和服务

new的使用
> ng new self-hero-demo               ----创建项目

component组件的使用
> ng generate component self-hero-detail   ---创建详细信息组件
> ng generate component self-hero-demo-message    ---创建操作信息组件
> ng generate component self-hero-demo-search    ---创建搜索组件
> ng generate component self-hero-demo-dashboard    ---创建仪表盘组件
> ng generate component self-hero-demo    ---创建列表组件

service 服务的使用
> ng generate service self-hero-demo    ---创建英雄服务
> ng generate service self-hero-demo-message    ---创建信息服务
> ng generate service InMemoryData     -- 创建网络服务

module路由使用
> ng generate module app-routing --flat --module=app   --- 创建路由信息

> npm install angular-in-memory-web-api --save   --安装网络服务(可选，默认创建项目可能已经存在)

> ng serve --open    --- 启动项目(默认端口号为4200)
> ng serve --port 8080 --open ---指定端口号启动项目(8080可修改成自己需要的)

最后还需要一个self-hero-demo的module，但是我目前不知道怎么在shell里边如何直接创建一个ts(尝试过>touch self-hero-demo未成功，所以直接右键创建的)。

2.2 需要的东西已经创建好，下边便是实现功能

具体的代码可以仿照anjular heroes 的官网的Demo学习，因为他的Demo很完整。