【Angular专题】——（1）Angular，孤傲的变革者

一. 漫谈Angular
二. 如果你还在使用Angularjs
三. 我计划这样学习Angular技术栈

一. 漫谈Angular

Angular，来自Google的前端SPA框架，与React,Vue并称前端框架的三驾马车，前些日子刚发布了7.0版本。它是一个十足的革命者，每一次亮相，都会把新的思想和软件层面的实现提供给开发者，从Angularjs1.0时代推翻jQuery的统治地位，到Angular2.0时代基于Typescript的全面升级，再到现在每半年一个大版本的高速更新迭代，不断革新着前端代码的编写方式，也推动着前端开发工程化和正规化的发展，可以说Angular一直在用行动诠释着自己的孤傲和才华。

Angular非常喜欢引入和传播思想层面的概念，它把那些被公认为正确优雅且有助于工程实践的事物带给前端，而并不在乎这些事物来自前端或者后端，也不在乎新的概念起源于哪个编程语言，它不发明概念，只是概念的搬运工，它似乎总是在说“这个想法是对的，那我们在Angular里实现它吧”，造成的直接结果就是学习曲线异常陡峭，许多初级和中级的开发者浅尝辄止，直接弃坑投奔React和Vue阵营，所有的创新都会面临这样的窘境，但Angular似乎并不在乎，升级迭代的速度反而更快了。事实证明这种精英门槛思维是正确的，它的确让很多初中级开发者无所适从，但同时也让中高级前端开发者和从后端转到前端开发的工程师受益，工程化的工具，面向对象的思想，高仿Java的语法，强类型的限制，一个个特性都对开发团队的整体素养提出了更高的要求，同时也让代码的质量也有了更多的保障。

Angular是有生命的，与其说它是一个框架，倒不如说它是一个老师，不仅教授编程，也传播思想，严厉却有活力。如果说Vue能激发开发者的兴趣，让你快速上手拿出作品，React能够强迫开发者深耕javascript语言本身的特性和组件化思想，那么Angular带给前端开发者的，更多的是正统的面向对象开发和软件工程的思维方式，它逼迫你改变散漫的编程习惯，强迫你学习新的实现方式，渐渐地你甚至忘记了自己是一个前端，那么恭喜你，说明你已经脱离了初级水平。

如果一件事情是软件工程师应该懂的，那么你就应该懂。在我眼里，这才是Angular带给前端开发者最有价值的思想，因为内心深处的自我认知和定位会决定一个人未来所能达到的高度。

二. 如果你还在使用Angularjs

提到Angular体系，许多开发者由于入行较晚的缘故，很有可能还在使用Angularjs1.X版本进行开发或维护，并没有必要觉得自卑或者沮丧。Angular的开发者并不见得就比Angularjs1.X的开发者更厉害，不夸张的说，Angularjs1.X中所包含的精华知识对很多开发者来说可能一辈子都学不完，你需要关注其底层原理，把知识点延伸开去学习，而不只是每天没完没了地写页面绑事件发请求然后自我陶醉。

Angularjs1.X被认为是模块化的开发框架，而Angular,Vue,React被认为是组件化的框架，从常见语法的角度来看的确是这样，但这并不代表Angularjs1.X不能进行组件化开发，只是门槛略高，Angularjs1.X中组件化的实现是基于自定义指令的，1-2年经验却未尝试过使用自定义指令的开发者比比皆是，造成的直接结果就是常常一个controller中的代码好几千行，代码里混合着各种DOM操作，不仅性能很难保障，维护难度也是噩梦级别的。

如果面对这样的情况你还没有解决思路，那我并不建议你开始Angular技术栈的学习，而应该先去搞清楚如何在自己最熟悉的框架中来应用组件化开发的思想。比如面对一个4000行的controller，先考虑一下自己能不能通过拆分子路由和组合视图将其重构为3-4个大模块，这样每个大模块就有约1000行代码，再考虑一下能否把大模块拆分成3-4个小模块，controller只传入必要的启动参数，然后在小模块中实现业务自治，并通过controller来实现不同小模块之间的通讯，这样每个模块的代码量基本就可以做到小于500行，接着把DOM操作尽量整合进指令的link函数中，配合框架自身的生命周期特点来运行。如果上面的描述你不知道如何做，那么就静下心好好查查资料，学习实践一下。如果你已经知道该怎么实现，那么就可以开启Angular2的学习了，你会在其中看到很多很多自己熟悉的东西。

三. 我计划这样学习Angular技术栈

说实话，我接触Angular才2个礼拜，但是我很喜欢它，严谨，优雅，最重要的是VSCode的主题很漂亮。我的学习计划大约是这样，如果感兴趣，欢迎一起行动起来：

1.慕课网的免费教程里有一个Angular的课程和一个Angular-Cli的课程，可以带你快速入门。（已完成）
2.阅读官方文档：Angular中文网地址：https://www.angular.cn/

官方文档特别详细，至少需要通读一次，然后在实际开发中遇到相关问题时再来查询。
3.针对概念和原理进行专题学习

针对概念关键词展开学习是我一贯的做法，在【一统江湖的大前端（7）React.js-从开发者到工程师】中就有提及。“学习一个框架，做一个TodoList，然后就没有然后了”，这是很多人对于新技术的学习方式，你会发现它其实并没有什么卵用，因为过半个月，你就会不记得自己做过什么了（别问我怎么知道的）。如果有实战项目，那是最好的，实战中的学习是最快的；如果没有实战项目，那么你应该关注它的核心概念和原理，响应式编程是什么东西，新的Angular中的DI系统有什么变化，修饰器是如何工作的等等，框架和实现细节或许会变化，但经典思想一般都是很稳定的，你只需要反复研究去理解它就可以了。
4.分享以及撰写技术博客

写博文并不是什么高大上的事情，只是一种习惯，一种辅助自己思考和总结的习惯。最重要的是，它可以提高你打字的速度，如果你用80%的时间敲完别人100%时间才能敲完的代码，那不就有20%的时间去学习新东西或者去写博客了么，我的时间基本就是这样挤出来的。