初识AngularJS

AngularJS

AngularJS[1]  诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。

AngularJS通过为开发者呈现一个更高层次的抽象来简化应用的开发。如同其他的抽象技术一样，这也会损失一部分灵活性。换句话说，并不是所有的应用都适合用AngularJS来做。AngularJS主要考虑的是构建CRUD应用。幸运的是，至少90%的WEB应用都是CRUD应用。但是要了解什么适合用AngularJS构建，就得了解什么不适合用AngularJS构建。

现状:

2013年下半年到2014年，AngularJS作为最热门的前端MV*框架，吸引了很多眼球，但是到了2014年末，它的光辉逐渐被React所掩盖，不再像以前那么“火”了。

在各种技术领域人群中，Web前端与客户端开发者是最时髦的群体。前不久举行的深JS（JSConf 2015）中，来自台湾的开发者赫门用一句精辟的戏谑说明了这种状况：“每18-24个月，前端就会难一倍”。爆炸式的技术增长，层出不穷的新名词让人眼花缭乱，作为追随者，何去何从？

所幸的是，在乱象中，我们仍然可以摸出两条主线，一条是以AngularJS、Vue.js、avalon为代表的MVVM流，一条是以React为代表的组件流，这两者是对前端框架的不同思考方式，各自吸引了很多追随者。在发展过程中，两边的理念也在互相学习，比如Vue.js也逐渐强化组件的概念。

MVVM流的几个框架中，AngularJS拥有最庞大的周边，但其实，这些框架的很多第三方组件略加修改之后，都可以很容易互相迁移，除了数据变更监控方式的不同，剩下的都只是模板语法的差异了。

要学会AngularJS，需要这样的前置技能：

 

• JavaScript中级水平；
• 具备MV*，分层、注入、模板等知识。

 

所以，前端要学的时候，需要补充的是第二项，后端学的时候需要补充第一项。如果具有其他语言的开发经验，写出比较规整的JavaScript代码还是比较容易的，而第二项所列的那些知识，一般的后端开发人员早就在比如SSH这样的框架组合中习以为常了，所以他们觉得这一切非常自然。

AngularJS可以视为是一种数据优先的框架，在它的三个层面中，数据模型是骨架，视图模型和业务事件是血肉，视图模板和指令是皮毛，这三层合在一起，就形成了一个活生生的Web应用。

我们在开发过程中，也应当遵循这样的实践，优先从数据模型去考虑问题，然后从展现层去切分模板，最后用视图模型（控制器）把它们粘合起来。

 

实践:

对一个产品来说，它的前端部分可以有几种选择：

 

• 基于ExtJS这类框架；
• 基于jQuery和相关的插件；
• 基于某一个前端MV*框架。

 

 

其中，第一种的操作体验并不很适合在互联网上使用；第二种对整个团队前端相关的技能要求较高，也要有一定的代码组织能力；第三种比较适中，但也需要团队中有人能熟悉这样的框架，掌控全局，其他人的技能要求可以比较低，借助Bootstrap之类的样式库的响应式特性，还能够比较容易让系统在不同设备上可访问。

目前市面上大多数云控制台都采用了单页化的模式，对于这种系统来说，仿客户端的操作体验要好很多。这些产品里，使用AngularJS的是主流，也有比如青云这样的，用的是Backbone。

很多管控系统并不是一系列很简单的管理界面的组合，很可能会存在一些聚合与关联。这时候，就要求我们对数据的共享和通信作一些考虑了。

此外，因为整个系统的单页化，会存在一些全局性的交互方式。比如说，在某个界面上发起文件上传之类的长时间操作，在此过程中，如果允许它切换到其它界面继续操作，上传过程变成在页面边角的一个进度条，然后整个上传过程一直有动态提示，整个交互体验就会比较好。这时候，可以考虑在AngularJS中封装一些service，用于做一些全局统一的交互处理。

使用AngularJS做这类有一定规模的单页应用，是有很多优势的。最典型的优势就是代码量，实现同样的功能，AngularJS可以比Backbone之类的少很多代码量，采用类似架构的Vue.js，avalon也有同等优势。

代码主要省在几个方面：

 

• 数据模型是POJO，无需额外封装；
• 绑定的配置直接写在HTML里，不必在JS层做判断、更新；
• ng-click，ng-dblclick等事件作了封装，“直接”在模板中“调用”控制器上的方法；
• AngularJS自身提供的功能足够强，$http，$q，jqLite等内置组件使得我们可以基本不引用第三方库；
• 由于绑定语法的便利性，原先需要“控件”来解决的大部分问题可以轻松解决，也可以少引用很多第三方库。

使用成本:

我所见过的几乎每一篇文章都会说，AngularJS的学习成本高，确实如此，因为要用好它，需要掌握的东西太多了。但是对于一个团队而言，使用AngularJS的成本并不高，因为团队是可以有分工，有技能搭配的。

比如，同样是做一个项目，一个很熟悉AngularJS的人带着五个只有入门技能的人很顺利做出来，因为用AngularJS的话，可以把代码分得很规整，大部分代码可以是很简单的写法，甚至能够让多数参与者在并不了解AngularJS相关机制的情况下把功能中规中矩地实现出来。但是如果用其他一些框架，可能里面至少要有半数人的基础较好，对个人能力的考验就相对较高了。

在使用AngularJS的项目中，绝大部分JavaScript代码都是纯逻辑，这部分代码可以使用ES6这样很先进的语法编写，然后通过Babel转换成ES5或者ES3代码执行，熟悉ES6的人会拥有比较高的开发效率。退一步讲，如果团队中存在一些只会使用Java的开发人员，也可以照样写出比较规整的逻辑代码来。

未来:

2014年末，AngularJS官方披露了2.0版本的一些细节，各种激进和不兼容的变更在整个社区引发了轩然大波。变更的原因无非是迎合标准，并且解决自身的一些历史问题。

对于开发者来说，将来如何把在用系统迁移到新版本，可能会是一个很重要的考虑点。

应对这个事情，最重要的是保持数据逻辑层面的清晰纯净，尽可能在这一层不依赖于框架的一些特性，然后在迁移的时候，这个部分的改动代价就会很小，大部分的变更都体现在模板层了。

总之，AngularJS框架现在已经进入成熟期，1.4版本大幅优化了性能，也提供了新的路由机制，我们完全可以放心地把它用在以各类管控系统为主的Web应用中，以强大的开发效率去快速推出产品。