Home > Article > Web Front-end > 体验jQuery和AngularJS的不同点及AngularJS的迷人之处_AngularJS

体验jQuery和AngularJS的不同点及AngularJS的迷人之处_AngularJS

WBOYOriginal: 2016-05-16 15:16:301111browse

AngualrJS是一个很贴心的web应用框架。它有很不错的官方文档和示例；经过在现实环境中的测试著名的TodoMVC project，它在海量的框架中脱颖而出；而且网上到处都是很不错演示或者展示。但是对于一个没有接触过和AngularJS相似的框架而且还是几乎都在使用像jQuery这样的JavaScript类库的开发者来讲，要从jQuery的思想转变成AngularJS的思想是有点困难的。至少对于我来说是这样的，所以我想要分享一些学习笔记希望帮到一些开发者。

本篇通过jQuery和Angular两种方式来实现同一个实例，从而体验两者的不同点以及AngularJS的迷人之处。

首先当然需要引用jquery.js和angular.js文件。

■ 使用jQuery让写一个简单的click事件


I am jquery content
$(function(){
$("#jquery-button").click(function(){
$('#jquery-content').toggle();
})
})

如果我们想让更多的div通过同一个点击事件实现toggle呢？

--首先要在页面中添加div，然后在js中添加相应的代码

I am jquery content
I am jquery content1
$(function(){
$("#jquery-button").click(function(){
$('#jquery-content').toggle();
$('#jquery-content1').toggle();
})
})

在AngularJS中又是怎样的一种情况呢？

■ 使用Angular来写一个简单的click事件



Angular content

var app = angular.module("app",[]);
app.controller("AppCtrl", function(){
var app = this;
app.isHidden = false;
app.toggle = function(){
app.isHidden = !app.isHidden;
}
})

如果我们想让更多的div通过同一个点击事件实现toggle呢？

--我们只要在页面中添加一个div,通过ng-hide属性来声明


Angular content
Angular content1

以上，通过简单的例子，来比较jQuery和Angular的不同之处，我们可以发现：AngularJS中通过声明的方式来应对变化，相比jQuery，AngularJS应对变化的成本更低也更灵活。

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：原生js实现图片层叠轮播切换效果_javascript技巧Next article：JavaScript通过代码调用Flash显示的方法_javascript技巧

See more

体验jQuery和AngularJS的不同点及AngularJS的迷人之处_AngularJS

Related articles