AngularJs与jquery 差异的分析

AngularJs主要用于构建单页面Web应用，同时也是一种构建动态web应用的结构化框架。它通过增加开发人员和常见web应用开发任务之间的抽象级别，使构建交互式的现代web应用变的更加简单。

相对于jquery来说，jquery是指你的代码决定什么时候后库中调用一个特定的方法；而使用1.AngularJs框架来说你实现了一些回调方法，到了特定的时候框架会去调用这些方法。

Jquery触发DOM事件上的绑定的jquery方法的响应。

AngularJs在加载时会将你的Dom和JavaScript
转向一个Angular App。包含着Angular指令和过滤器的HTML会被编译成一个视图树，响应的范围和控制器会被附加到这个树上，内部的应用循环确保了视图和模型之间的数据绑定。(MVC框架)

2.Angular是一个声明而不是命令：

举个例子，我们想要根据checkbox的状态隐藏/显示某一个元素。用jQuery，我们会这么做：

<div>

   <input id="toggleShowHide" type="checkbox"><div id=”specialParagraph”>

   This content will disappear and reappear
if you click the checkbox above

</div>

<script>

   $(function() {

        function toggle() {

           var isChecked = $('#toggleShowHide').is(':checked');

           var specialParagraph = $('#specialParagraph');

           if (isChecked) {

               specialParagraph.show();

           } else {

               specialParagraph.hide();

           }

       }

       $('#toggleShowHide').change(function() {

           toggle();

       });

       toggle();

   });

</script>

JS代码是用一种命令的方式操作DOM：拿到某一个节点和某一个属性，查看它的值，然后做这做那。

然Angular的做法：

<label>show Content below

<input ng-model=’test’type=’checkbox’/>

</label>

<div ng-show=’test’>

This content will be disappear and reappear if you click the checkbox above

</div>

Angular是用声明绑定和规则，使之附加到这个树上。

3.依赖注入：(处理数据的依赖方式)

假设有一个JSON的数据源被放在$resource在Angular中：

DataResource = $resource(url,default_params,method_details);

在任何需要这个JOSN数据的控制器，可以通过调用DataResource 作为一个控制器参数传入的方式使用它。

如果需要在控制器中写一个异步HTTP请求，将$http作为一个控制器参数。

Angular在代码内部执行的过程为：

Angular分析代码——>找到这些参数——>将代码所需服务发送过来

4.数据获取

当angularJs给了你控制模型层的全部 自由后(可随意结合普通数据变量，对象和数组的时候)，他提供了一个便捷的方式与服务器的REST API交互。

eg:

var user = $resource(‘/user/:userId’,{userId :
’@id’})

var user = user.get({userId:123},function(){

user.abc = true;

user.$save();

});

总结：

   jquery 直接操作DOM，AngularJs是一个把HTML+JS包包装成MVC框架。所以jquery写的时候想的是每个具体的元素该如何处理；AngularJs更多的是想这个数据怎么在各个层级间流动——对于具体元素的关注仅限于在写显示层的时候。