AngularJs与jquery 差异的分析

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

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

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

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

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

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

<div>

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

@H_301_2@This content will disappear and reappear if@H_301_2@@H_301_2@you click the checkBox above

</div>

@H_301_2@$(function@H_301_2@() {

@H_301_2@function@H_301_2@@H_301_2@toggle() {

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

@H_301_2@specialParagraph = $('#specialParagraph'@H_301_2@);

@H_301_2@(isChecked) {

@H_301_2@specialParagraph.show();

@H_301_2@} else@H_301_2@@H_301_2@{

@H_301_2@specialParagraph.hide();

@H_301_2@}

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

@H_301_2@});

@H_301_2@});

</script>

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

然Angular的做法：@H_301_2@

<label>show Content below@H_301_2@

<input ng-model=@H_301_2@’@H_301_2@test@H_301_2@type=@H_301_2@checkBox@H_301_2@/>@H_301_2@

</label>@H_301_2@

<div ng-show=@H_301_2@>@H_301_2@

T@H_301_2@his content will be disappear and reappear if you click the checkBox above@H_301_2@

</div>@H_301_2@

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

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

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

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

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

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

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

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

4.@H_301_2@数据获取@H_301_2@

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

eg:@H_301_2@

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

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

user.abc = true;@H_301_2@

user.$save();@H_301_2@

});@H_301_2@

总结：@H_301_2@

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

AngularJs与jquery 差异的分析

猜你在找的Angularjs相关文章