取代jQuery？
我很久之前便听说了angularJS的大名，之前的leader也经常感叹angularJS的设计如何如何精妙，可叹一直没有机会深入了解，国庆长假因为没钱出游，倒是可以对他做一个了解……
根据之前的经验，就现有的前端项目，如果最初没有良好的设计，做到一定阶段一定会变得难以维护，就算最初有设计，变化无常的PM也会让你的项目BUG丛生。
一个页面的复杂程度不断的增加，依赖模块也会变得混乱，而其中最为头疼的就是页面级随心所欲的DOM操作了！
MVC类的框架可以很好的解决以上问题，而号称MVVM的angularJS在处理这种情况似乎更有话语权，所以我们今天便来好好研究其一番。
angular适合做具有复杂数据交互的前端应用，他旨在让我们摆脱繁琐的DOM操作，而将注意力集中在业务逻辑上，这里摆脱繁琐的DOM操作是个非常关键的愿景，也是很多人不太理解，甚至会将jQuery这种库与Backbone或者angularJS这种框架做对比的原因。
|
1 2 |
jQuery是非常优秀的DOM操作工具库，在DOM操作上，基本没有库能超越他了 但Backbone&angularJS这种MVC是框架提供的是完整的解决方案，甚至会依赖jQuery&zepto，他们是两个东西，不能互相比较，所以完全没有angularJS要取代jQuery的可能，而当DOM操作过于杂乱一定是你的项目出了问题。 |
这里举个jQuery不依赖MVC骨架的例子，我们的订单填写页，需要在商品数量变化后导致金额变化，并且没有选商品时，支付按钮不可点击：
对于一个有些经验的菜鸟来说，可能会这样写代码：
|
1 2 3 |
$('#reduceNum').click(function() { $('#payBar #num').text($('#curNum').html() - 1); }); |
对于一些有一定经验的老鸟来说，可能会这样写代码：
|
1 2 3 4 5 6 7 |
events: { 'click #reduceNum': reduceNumAction }, reduceNumAction: function() { $('#payBar #num').text($('#curNum').html() - 1); } |
第一段代码可能会导致你年底加薪无望，并且在团队中没有话语权；而第二段代码积累到一定量后会让这个项目变得不可维护：
① 支付工具栏初始化状态如何显示，如果数字组件按需做异步加载，这个显示将变得更加负责。
② 哪些操作将导致支付栏变化，你如何组织这些变化的代码，是让他四散到各处，还是集合在一起，集合后导致函数过大怎么办？
③ 新增的导致工具栏变化的操作会不会对原来的操作造成影响，新增的代码放在何处？
④ 如果有地方要使用工具栏处的信息，取的信息会不会是无效的（取的时候可能正在变化），应该通过DOM取还是内存取？
⑤ 如果支付栏DOM结构如果变化，对你的程序影响有多大，如何主流程的影响，比较支付点击后只需要操作数据，不需要关注DOM？
⑥ ……
这个就是仅仅依赖jQuery要面临的问题，并且这种问题是无解的，因为这里的专注点是DOM操作而不是数据，如果将关注点变成了数据，代码就不是这样写的，DOM操作仅仅是过程而不是目的，我们代码的目的，往往是展示数据、获取数据，这点一定要清晰。
所以让我们带着这些问题：angular的优势在何处，他如何改善我们的编程体验，进入今天的学习吧。
初探angularJS
Hello World
学习任何一门语言，Hello world是必不可少的，他是我们迈向精通的唯一路径：
|
1 2 3 4 5 6 7 8 9 |
<!doctype html> <html ng-app> <head> <script src="angular.js" type="text/javascript"></script> </head> <body> Hello {{'World'}}! </body> </html> |
被{{}}包裹的便是angularJS变量，上述程序稍作改变的话：
|
1 2 3 4 5 6 7 8 9 10 |
<!doctype html> <html ng-app> <head> <script src="angular.js" type="text/javascript"></script> </head> <body> <input ng-model="name" type="text" /> Hello {{name}}! </body> </html> |
便会同步显示文本框输入内容，这里通信的基础是model对应着ng-model，只要被ng-app包裹就会受angularJS控制，用angularJS自己的话说：HTML标签增强
作用域
为什么文本框中的变化会体现在外层，这个涉及到了ng-model的双向绑定知识，我们暂时不予理睬，但是外层又是从哪里读取name这个变量的呢？
在angular中，属性会存储在一个@scope(作用域)的对象上，每次我们对文本框的更新皆会通知scope上的name属性，在angular中，scope是连接controllers（控制器）与template（视图）的主要胶合器。
上述代码完全不涉及js代码，真实的场景中每个代码段会对controller做依赖，我们这里对代码做一些更改：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!doctype html> <html> <head> <script src="angular.js" type="text/javascript"></script> </head> <body ng-app="app" ng-controller="MainCtrl"解……
根据之前的经验，就现有的前端项目，如果最初没有良好的设计，做到一定阶段一定会变得难以维护，就算最初有设计，变化无常的PM也会让你的项目BUG丛生。 一个页面的复杂程度不断的增加，依赖模块也会变得混乱，而其中最为头疼的就是页面级随心所欲的DOM操作了！ MVC类的框架可以很好的解决以上问题，而号称MVVM的angularJS在处理这种情况似乎更有话语权，所以我们今天便来好好研究其一番。 angular适合做具有复杂数据交互的前端应用，他旨在让我们摆脱繁琐的DOM操作，而将注意力集中在业务逻辑上，这里摆脱繁琐的DOM操作是个非常关键的愿景，也是很多人不太理解，甚至会将jQuery这种库与Backbone或者angularJS这种框架做对比的原因。
这里举个jQuery不依赖MVC骨架的例子，我们的订单填写页，需要在商品数量变化后导致金额变化，并且没有选商品时，支付按钮不可点击：
对于一个有些经验的菜鸟来说，可能会这样写代码：
对于一些有一定经验的老鸟来说，可能会这样写代码：
第一段代码可能会导致你年底加薪无望，并且在团队中没有话语权；而第二段代码积累到一定量后会让这个项目变得不可维护： ① 支付工具栏初始化状态如何显示，如果数字组件按需做异步加载，这个显示将变得更加负责。 ② 哪些操作将导致支付栏变化，你如何组织这些变化的代码，是让他四散到各处，还是集合在一起，集合后导致函数过大怎么办？ ③ 新增的导致工具栏变化的操作会不会对原来的操作造成影响，新增的代码放在何处？ ④ 如果有地方要使用工具栏处的信息，取的信息会不会是无效的（取的时候可能正在变化），应该通过DOM取还是内存取？ ⑤ 如果支付栏DOM结构如果变化，对你的程序影响有多大，如何主流程的影响，比较支付点击后只需要操作数据，不需要关注DOM？ ⑥ …… 这个就是仅仅依赖jQuery要面临的问题，并且这种问题是无解的，因为这里的专注点是DOM操作而不是数据，如果将关注点变成了数据，代码就不是这样写的，DOM操作仅仅是过程而不是目的，我们代码的目的，往往是展示数据、获取数据，这点一定要清晰。 所以让我们带着这些问题：angular的优势在何处，他如何改善我们的编程体验，进入今天的学习吧。 初探angularJSHello World学习任何一门语言，Hello world是必不可少的，他是我们迈向精通的唯一路径：
被{{}}包裹的便是angularJS变量，上述程序稍作改变的话：
便会同步显示文本框输入内容，这里通信的基础是model对应着ng-model，只要被ng-app包裹就会受angularJS控制，用angularJS自己的话说：HTML标签增强 作用域为什么文本框中的变化会体现在外层，这个涉及到了ng-model的双向绑定知识，我们暂时不予理睬，但是外层又是从哪里读取name这个变量的呢？ 在angular中，属性会存储在一个@scope(作用域)的对象上，每次我们对文本框的更新皆会通知scope上的name属性，在angular中，scope是连接controllers（控制器）与template（视图）的主要胶合器。 上述代码完全不涉及js代码，真实的场景中每个代码段会对controller做依赖，我们这里对代码做一些更改：
|
