AngularJS http://www.angularjs.org/ 是google在几年前打造的一个全新的JS的框架，如今已经很成熟，它的理念完全颠覆了我曾经对js的使用习惯和理解。
在js的世界里，做前端的或许没有人不知道jQuery，然而如果你掌握了AngularJS，那么你会发现她是如此的完美和与众不同。

本篇文章不会谈及技术性的问题，旨在帮你引荐AngularJS，让你对它有个初步的认识

在谈及AngularJS有多好之前，我来说说在以前我们是怎么做的：
如果以前要制作一个网站，对于前端来说需要规划整体框架的HTML，然后是包括首页等等各种页面里的内嵌的页面，当我们制作好HTML页面后还得交由网站的程序开发把类似PHP这样的服务器代码嵌入到程序视图里，在这过程中也许前端制作好的HTML到程序那会变得面目全非，甚至页面出来后和制作的HTML有很大的差异，前端和后端甚至会打起来，orz…
项目在刚刚开始制作好后还不会有什么问题，但是随着时间的推移，项目需求的不断变化，甚至经历了N个开发人员的离职、入职等等，我们通常会发现现在的项目代码完全无法直视，各种风格的JS，各种不同风格的HTML标签，或许还夹杂着程序员完全不考虑美感的代码，在还没有类似Bootstrap这样的CSS框架之前甚至会出现各种不一样的HTML布局，各种重复的HTML等等。作为项目里的人看到这样的情况会怎么想，怎么做？答案是：只能重构。这是普遍存在的问题：HTML的不断调整、人员的变动、和程序配合的调整等等，使得传统的制作网站的方式如此不堪。

jQuery是一个非常优秀的DOM操作的类库，AngularJS其实也并不排斥jQuery，反而如果你在页面里加载jQuery后它的很多DOM操作都是依赖jQuery的（页面没有载入jQuery的话AngularJS内置jqlite），所以先请不要把jQuery和AngularJS作为对立面来理解，你可以把jQuery当做AngularJS处理DOM的一个强大的助手的关系。

那么今天有了AngularJS后，原先的工作方式会发生怎样的变化呢？
依靠AngularJS强大的MVC和数据绑定功能，我们的工作可以和服务器程序最大程度的分离，我们可以让程序完全只要提供数据即可，所有的逻辑和页面呈现完全由我们来控制，不管将来怎么改动，服务器程序只要改动他们的数据内容格式，前端就负责自己的指令控制部分和模板即可。
除了和服务器程序可以最大的分离工作，前端的设计理念也会发生很多变化：
你的关注的重点是如何编写自己的指令控制，如果编写控制器以便获取需要的数据并把数据通过模板显示出来。你可以制作很多指令集，然后每个不同的页面的模板引用相应的指令即可。这相当于你制作了很多零件，然后制作页面只要把这些零件进行拼装即可。
每一个指令可以配合一个模板，每个页面也可以有一个独立的模板和控制器，然后模板里可以定义好需要用到的HTML及指令，控制器主要处理页面内的一些独立逻辑。
这样项目完成后，将来不管怎么调整，我们只要分模块进行维护即可。

在没有接触AngularJS时，这些或许看上去一头雾水，我切身的体验是：AngularJS入门好难。确实好难，一开始找不到门路。初学者会带着传统的思想去使用AngularJS，但是这是错的，你必须用数据即显示，数据即一切的思想去使用它，你不用去操作DOM，所有要操作DOM的代码请封装在指令（directive）里，在页面的控制器里，只要操作数据的相关代码，这样，你就可以很容易入门了。

那么它都有哪些优点呢？下面我来简单的说说（其实在很多人的文章里也都有）

数据绑定

在AngularJS的世界里，和DOM打交道的东西都交给directive吧（在下面会讲），你在使用时，只需要关心js里的$scope里的数据，当变量中的数据发生变化时，对应的DOM也会能够体现出来。

变量注入

相关的文章其实也很多，理论方面可以讲一大篇文章，简单的说就是AngularJS通过一些机制可以把本来属于内部的（或局部）变量在你调用自己设置的function时可以把它们注入到你的function中，这样你就可以顺利使用这些变量，比如在AngularJS里常见的代码，其中$scope就是被注入的变量，你可以直接使用

function Controller($scope) {
    $scope.test = 132;
}

 

指令控制

不知有没有人用过jQuery Mobile？在它里面对代码的处理完全是属于传统的思想理念，但是在AngularJS里会变得相当不一样，这就激发了我们全新的HTML前端设计理念的改变。并且，在AngularJS里有非常多的内置的指令功能很好用，比如a,form,ngClick,ngSubmit 等等

MVC和CMD规范

AngularJS的mvc还是很赞的，很容易使用，而且它内置CMD规范，但是CMD规范只服务于它内置的功能，所以如果你和我一样会加载很多别的类库甚至希望把css也纳入到模块加载里，你可以考虑再加一个requirejs(http://requirejs.org/) 或者国内大牛们开发的seajs(http://seajs.org/)来加载类库和css

下面推荐一些不错的文章，可以帮你学习使用AngularJS

Angular 2.0的未来展望(翻译)