Angular 教程：英雄之旅

《通信软件开发与应用》课程结业报告

演示：

Angular是一个由Google开发维护的开源前端开发框架和平台（其它两个流行的是React和Vue）。
框架提供了大量高效的结构或者良好的模式，我们根据框架提供的结构或者模式去书写代码，由框架帮助我们去执行相应的操作。

《英雄之旅》应用，可以显示一个英雄列表， 并允许用户选择一个英雄，查看该英雄的详细信息，并对英雄进行增加、修改和删除功能。

开发过程

首先，一个工程都需要先建立一个环境，所以我们先来搭建一个angular的环境。以下介绍下各个环境。
①安装JS运行环境node和版本控器git：Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型,使其轻量又高效。Node.js 的包管理器 npm,是全球最大的开源库生态系统。Git是一个开源的分布式版本控制系统，可以有效、高速地处理从很小到非常大的项目版本管理。

②包管理器yarn：Yarn 有效地对请求进行排队处理,避免发起的请求如瀑布般倾泻,以便最大限度地利用网络资源。 相同的软件包 从npm 安装软件包并保持相同的包管理流程。

③包源配置：默认包仓库在海外, 速度及稳定性受到GFW的影响(WTF GFW！), 改为使用淘宝的包源。

④Angular开发工具angular/cli：Angular CLI用于简单，快速构建Angular2项目，只要掌握几行命令就能扣减前端架构。依赖于NodeJs和npm。

⑤后台服务器Deployd：Deployd是一个基于NodeJs和MongoDB数据库的开箱即用的后台服务程序。这里我先在本地端口部署了MongoDB数据库，之后将MongDB部署在百度云上。

整个开发的流程为创建英雄编辑器，显示英雄列表，添加服务，从数据库中获取数据。并最终在英雄之旅中实现了增删改的功能。

1.创建英雄编辑器
该开发流程主要的工作有，使用 Angular CLI 创建一个名为 heroes 的新组件；从 Angular 核心库中导入 Component 符号，并为组件类加上 @