CSDN知识库精品推荐：AngularJS学习指南

知无不言 第十三期

知识库特邀编辑讲技术的那些事儿

李泽扬，CSDN知识库特邀编辑，杂志作者。在多玩YY负责升龙游戏云平台前端开发。之前曾任职于腾讯，主要技术栈为Java及前端，GitHub帐号为giantray。

编者说

如果你是一名前端开发工程师，但还不了解AngularJS是做什么用的。那么，强烈建议仔细阅读本文。 一言以蔽之，AngularJS（本文主要介绍的是1.x版本）是一款优秀的前端JavaScript框架，由Google开发、维护。该框架有着诸多特性，最为核心的是MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等。

AngularJS概述

【生态圈成熟】

在GitHub上，AngularJS以超过48000个Star，高居榜第四位，在前端领域，只落后于Bootstarp，高于React及jQuery，其受欢迎的程度，可见一斑。以ng作为关键字在GitHub上搜索，有超过8000个JavaScript项目，而这些项目，很大一部分就是AngularJS的第三方开源组件。也就是说，AngularJS的生态圈已经颇为完善，你不用频繁造轮子，有很多现成的工具可以用。

【AngularJS带来了什么】

AngularJS代表了目前前端开发的一种趋势，有很多先进的设计理念。很多人初次认识AngularJS，会被其神奇的双向绑定及语义化标签所吸引。在实际的项目开发中，也会发现，AngularJS解决了界面和数据联动这一非常繁琐的问题，切切实实为开发缩减了大量的代码（例如少了很多元素选择、设值取值的代码），一样的功能，用AngularJS实现，代码量可能只有jQuery的三分之一，开发人员可以有更多的精力集中于实际业务逻辑中。另外，遵循AngularJS规范开发，代码职责更加清晰，可维护性更好，可以防止一些刚学JavaScript的程序员写出一堆难以维护的代码，指令的特性，极大提高项目Web组件化的程度。

而对于学习者来说，可以带来以下的提升：

1. 学习MVVM的模式，写逻辑分层更佳的代码，你会发现自己以前把各种各样的代码逻辑都扔到一起，简直就是一坨“文明用语” 。

2. 学习模块化开发 。

3. 理解Web组件化的理念和设计模式。

4. 学习如何写可测性更佳的代码。着力提高可测性，是AngularJS的一大设计哲学。

【没有完美的框架】

就AngularJS 1.x来说，还存在不少缺憾。例如，受人诟病的，AngularJS概念太多，有一定的学习曲线。在浏览器兼容方面，从AngularJS 1.3版本之后，就抛弃了对IE8浏览器的支持。对于崇尚小而美的人来说，AngularJS体积庞大，架构重，可以干的事情太多。在性能方面，其脏检查的特性注定了会存在局限。

但是，世上没有完美的框架，也不要为了学框架而学。对于项目开发来说，一定要结合实际情况，决定是否引入新框架、新技术。而从学习角度讲，学习框架，不仅是解决问题，更要学习框架的思想。

CSDN知识库包含了知识体系和相关知识点内容

AngularJS 知识节点

1. 视图与内置指令：AngularJS内置了大量指令，如ng-model、ng-if、ng-class、ng-click等，帮助我们写HTML模板。你需要理解这些指令应该如何使用，例如如何通过双向绑定ng-model指令，往HTML中填充值，通过ng-click绑定事件等。

2. Controller：在AngularJS中，通过Controller来初始化数据和定义事件函数。你的AngularJS学习之旅，可以从写一个简单的HTML模板及对应的Controller开始。

3. Directive：Directive是AngularJS中比较难上手，但也是非常重要的概念。它相当于一个自定义的HTML元素。Directive是Web组件化开发的利器，能够将view中复杂的交互逻辑抽取为一个个指令，使view具有更强的可读性及维护性。你可以从最简单的指令开始，逐步了解如何绑定HTML模版，绑定事件，写对应的Controller，传参等。

4. Filter：你可以自定义Filter，用来在HTML模板上做数据格式化，值到值的转换。Filter比较简单，但经常会用到。

5. 页面路由：真正的Web项目，当然离不开页面路由。AngularJS官方提供了路由库ngRoute，另外，还有一个好用且广受推荐的第三方库Angular-UI-Router。前者是简单版，后者功能更加强大。我个人倾向于使用Angular-UI-Router，因为它能覆盖更多实际的业务场景。

6. HTTP：你可以通过$http和后端服务器通信，也可以用更高级的封装$resource和RESTful API通信。这两个组件可以带来抽象层级更高的后台通信逻辑。另外，你还会接触到$promise，用一种更加优雅的链式方式写异步通信逻辑。

7. 服务：说到服务（Service），那就一定要好好了解Provider、Factory、Service的差别和使用方式。在实际项目开发中，一般会将后台数据请求与数据缓存逻辑放到Service（或者Factory）中，以方便在不同的Controller中复用公共的逻辑。

8. 深入原理：如果你觉得AngularJS已经基本入门了，建议再重点理解以下原理：AngularJS启动过程、依赖注入、脏检查机制、MVVM模式、AngularJS作用域、$promise。彻底理解这些原理之后，相信你对AngularJS的认识会提升一个层次。

9. AngularJS 2：AngularJS 2跟AngularJS1.x的差别非常大，甚至可以认为是两套完全不同的框架。本文截稿之前，AngularJS 2.0还处于Beta阶段。至于是用AngularJS 1.x还是用AngularJS 2，我个人的观点是，在未来一段时间，AngularJS 1.x还会有较强的生命力，官方团队也表示会继续维护1.x版本，AngularJS 2周边的资料及开源组件也需要时间去积累。所以，如果是现在要上马的项目，还是用AngularJS 1.x靠谱些。在学习和使用AngularJS1.x的过程中，对于前端的架构设计、个人视野的提高，也有较大的帮助。

10. 测试：自动（单元）测试涉及的两个主要工具是Jasmine和Karma。AngularJS在设计之初，就希望能使程序员编写更干净、可靠、可测试的代码。这是AngularJS带来的最有价值的特性之一。

11. 前端工程化：在开发大型Web项目时，需要用到前端工程化的方式，解决可以自动化处理的事情，解放生产力。例如，可以用Grunt、Gulp、Webpack做代码混淆、打包、自动构建等，用Bower做包依赖管理，用Yeoman自动生成代码。工欲善其事必先利其器，将AngularJS和这些生产力工具结合，对项目的开发效率大有裨益。

12. 移动开发：ionic是一个基于AngularJS、较为成熟的移动开发框架。它可以用来做Hybrid App开发，写JavaScript代码，最终生成可以运行在Android及iOS上的App。

13. 官方的增强组件及第三方组件：在实际开发中，你也许还需要了解如何通过ngTranslate做本地化、ngAnimate做动画。另外，还可以到GitHub上搜索“ng”，然后按Star数排行，看看有哪些受欢迎，好用的第三方组件。