Angular教程有个很有意思的英雄示例，用以展现Angular这个框架的核心功能，并让你快速做出一个便于理解的小应用。尽管随着ng8之后，ng官方又推出了新的小示例，更加简洁更加精炼，但这个实例并不是基于脚手架完成的，因此我还是使用英雄示例作为NG学习的开篇。
开始之前简单的说一下为什么要学NG，Vue精通了咋滴，精通了去看Vue3啊，pre-alpha都出了。这里解释一下，其实Vue的使用水平我也只是个菜鸡，连熟悉都不敢谈，但我觉得这并不能影响我学NG。大家可能都知道NG最近一年的势头不是很好，国外是React的天下，国内是Vue的天下，NG的位置似乎岌岌可危。
但是这并不能影响NG是一个非常优秀的框架，没有人敢否认NG的优秀，因此我学习的初衷是没有错的，其次处于工作的考虑，Vue可能还是我一定要去深入理解的框架，但是NG并不是没有和Vue相通的地方，学习新技术的过程并不是对老技术的弃用。
最后写这么一段话也是对自己的鼓励吧，人们说NG对于其他两个框架更难，更适合后端开发人员去学习，我个人来说虽然最开始是Flask入门的，但是并不是意味着NG更适合我，因为我觉得这个所谓的后端更多指的是Spring或者.net的学习人员。所以能鼓励自己一心学习下去也不枉说了这么多了。
最后说一下最近的文章我都是使用angular+nest.js作为技术栈的，估计没什么人看，我也就随意了，一个用NG代替，一个用NJ代替，说起来还是有点意思的。
英雄，启程吧！
目录
介绍
这里直接贴官方介绍，看看做完这个实例能学到什么东西：
使用Angular 的内置指令来显示 / 隐藏元素，并显示英雄数据的列表。
创建 Angular 组件以显示英雄的详情，并显示一个英雄数组。
为只读数据使用单向数据绑定。
添加可编辑字段，使用双向数据绑定来更新模型。
把组件中的方法绑定到用户事件上，比如按键和点击。
让用户可以在主列表中选择一个英雄，然后在详情视图中编辑他。
使用管道来格式化数据。
创建共享的服务来管理这些英雄。
使用路由在不同的视图及其组件之间导航。
总体来说，我做这个示例是按照中文官网来的，只遇到了一点不太清楚的地方，后文会讲到，别的都是根据示例敲下来的，没有遇到什么阻碍。可能是我从NJ转过来的，架构其实是非常相似的，因此使用起来感觉很是方便。这篇文章并不会贴出所有的代码或者一句句分析之类的，我觉得官网肯定比我介绍的详细多了，我也没必要再重复一遍，但是我觉得我可以更加清楚的厘清整个项目的思路。
第一课
NG Hero的第一课主要创建一个组件，然后实现了数据的双向绑定，意思就是将数据和HTML便签元素绑定到了一起。个人觉得不是很重要，重要的是引入了元数据的概念。
同时，这里还简单的使用了了一个管道指令，uppercase，用来转换为大写。
第二课
这里主要使用了ngfor和ngif的用法，同时介绍了CSS应该写在什么位置，接着引入了点击事件：
<li *ngFor="let hero of heroes" (click)="onSelect(hero)">()让NG去监听li的事件，发生了之后调用 onselect函数。
最后是NG的CSS绑定函数：
<li *ngFor="let hero of heroes"
[class.selected]="hero === selectedHero"
(click)="onSelect(hero)">
<span class="badge">{{hero.id}}</span> {{hero.name}}
</li>如上面的例子，.selected定义的样式，只有在hero===selectedHero的时候才会添加，而我们知道，只有当选中该hero时，才会出现hero===selectedHero的情形，而没有被选中的自然就不生效。
这样让NG对于根据条件添加或移除一个 CSS 类变得很容易。
第三课
这一课开始，项目中开始有了父子组件的设计，这里不像Vue有类似views和components两个文件夹用来区分视图和组件，而是把所有的组件放在了一起，有的是组件，有的是视图，会显得稍微有点乱，个人习惯的话还是会把views和components区分开来，也很简单，创建的时候直接输入：
ng g component components/..
ng g component views/..还有@ Input输入属性和单向数据绑定的语法。
第四课
从这一课开始，服务和依赖注入就登上了舞台，首先我们要知道为什么要需要服务这个东西，尽管之前我们都把数据和处理数据的方法直接放在组件中，但是这并不是一个很好的选择，我们完全可以让服务帮助我们去做这些事情，我们所要作的就是注入这些服务，使用服务中定义的方法完成我们想要做的事。
所以这一篇的前半段基本就是用服务的方式重组组件。
注意在要求 Angular 把服务注入到组件之前，你必须先把这个服务提供给依赖注入系统，默认情况下，Angular CLI 命令
ng generate service会通过给@Injectable装饰器添加元数据的形式，用根注入器将你的服务注册成为提供商
在组件中使用服务会写在constructure里面，而构造函数又不能去做别的多余工作，因此我们可以使用钩子函数去处理一些逻辑，比如这里的向服务器请求数据，我们使用onint。
而这时我们要注意的是从服务器获得数据本身就是异步操作，在Vue我们借助axios来处理，而在angular中axios很少出现的原因，一方面是自带的httpclient已经足够清晰了，更何况还有强大的rxjs的存在。
因此这里顺理成章的引出了Observable。
同时这里还开了一个新的业务，用来显示点击时的消息处理。
第五课
第五课终于讲到了路由，使用如下命令添加路由板块：
ng generate module app-routing --flat --module=app
--flat把这个文件放进了src/app中，而不是单独的目录中。--module=app告诉 CLI 把它注册到AppModule的imports数组中。通常不会在路由模块中声明组件，所以可以删除
@NgModule.declarations并删除对CommonModule的引用
同时为了显示路由到的界面我们要添加一个路由出口：
<router-outlet></router-outlet>这里涉及到了我follow这个demo时唯一出现的问题，我直接写的时候发现这里VSC报错了，查阅之后才发现在AppModule里面要导入一个东西：
import [
...
RouterModule,
...
]剩下的都是些所有的路由系统都会涉及到的导入，回退，默认视图，动态路由等东西，这里就不提了，业务方面添加了一个仪表盘作为默认页面。
第六课
终于到最后一课了，也是稍微有些麻烦的一课了，因为我们要使用httpclient去远程获取数据了，刚开始使用可能确实没有axios好用，当然你也可以去装axios去处理。
这里它使用了一个远程模拟数据的库来代替服务器，我们也可以使用实际的服务器，写一点简单的API即可。
然后就是老一套的增删改查，最后还有一个简单的搜索功能，不再细说。
总体来看这一套英雄示例写的还是非常全面基础的，核心功能都涉及到了，同时难度控制的也还好，不会让人觉得NG是一门非常难学的框架。
如果说从Vue过来的，可能觉得最不一样的地方就是NG的规范性还有rxjs了，最起码我现在的感觉是这样的，NG马上第九版了，随着NJ的大热，希望会有更好的发展。