适合Angular初学者的小项目

Note：这个项目只适合初学者，对 Angular 熟悉的能够跳过。

相信不少Angular初学者在学习过程当中都阅读过成熟开源项目的代码，好比：ngx-admin，primeng。这些项目，内容丰富，结构良好，惟一的缺点就是太大了，新手刚接触的时候会比较懵，不知道如何下手。

我当初也有过这样的经历，突击学习 Angular 一个月而后作项目，过程当中的血和泪再也不细表。学习过程当中，折腾我最久和让我印象最深入的地方有两点：

1. 如何引入第三方插件库
2. 如何理解和使用路由

第一点，我之前在 SegmentFault 上问过这个问题 Angular 4.X版本如何引入第三方JS的库，已经有了很好的回答，这里就再也不赘述。

第二点才是我这篇文章的目的，我将真实项目中的结构简化抽取出来，着重于演示切分页面使用路由，写了一个简单易懂，对初学者比较友好的，很容易理解并模仿的小项目 HW-admin。

主界面以下：

很典型的企业应用，此项目遵循 Angular 推荐的结构规范，层次清晰明了，也包括懒加载，预加载等功能。主要的样式暂时使用 Bootstrap，将一些经常使用的第三方库封装进来，好比 jQuery，Echarts等。

代码量不大，结构也很简单，假如看过以后理解了，写相似项目的布局应该是垂手可得的事情。

熟悉 Angular 的小伙伴假如对移动端开发感兴趣的，我推荐下 ionic ，基于 Angular 的， 能够看我另外一个ionic 小项目 hw-basic。

欢迎 fork 和 star