AngularJs与jquery 差异的分析

前端之家收集整理的这篇文章主要介绍了AngularJs与jquery 差异的分析前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

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

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

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

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

<div>

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

This content will disappear and reappear ifyou click the checkBox above

</div>

<script>

$(function() {

functiontoggle() {

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

specialParagraph = $('#specialParagraph');

(isChecked) {

specialParagraph.show();

} else{

specialParagraph.hide();

}

$('#toggleShowHide').change(toggle();

});

});

</script>

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

然Angular的做法:

<label>show Content below

<input ng-model=testtype=checkBox/>

</label>

<div ng-show=>

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更多的是想这个数据怎么在各个层级间流动——对于具体元素的关注仅限于在写显示层的时候。

猜你在找的Angularjs相关文章