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


Posted in Javascript onFebruary 02, 2016

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

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

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

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

<button id="jquery-button">JQuery Button</button>
<div id="jquery-content">I am jquery content</div>
$(function(){
$("#jquery-button").click(function(){
$('#jquery-content').toggle();
})
})

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

--首先要在页面中添加div,然后在js中添加相应的代码
<button id="jquery-button">JQuery Button</button>
<div id="jquery-content">I am jquery content</div>
<div id="jquery-content1">I am jquery content1</div>
$(function(){
$("#jquery-button").click(function(){
$('#jquery-content').toggle();
$('#jquery-content1').toggle();
})
})

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

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

<div ng-app="app" ng-controller="AppCtrl as app">
<button ng-click="app.toggle()">Angular Button</button>
<div ng-hide="app.isHidden">Angular content</div>
</div>
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属性来声明
<div ng-app="app" ng-controller="AppCtrl as app">
<button ng-click="app.toggle()">Angular Button</button>
<div ng-hide="app.isHidden">Angular content</div>
<div ng-hide="app.isHidden">Angular content1</div>
</div>

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

Javascript 相关文章推荐
可以用来调试JavaScript错误的解决方案
Aug 07 Javascript
捕获键盘事件(且兼容各浏览器)
Jul 03 Javascript
jquery操作下拉列表、文本框、复选框、单选框集合(收藏)
Jan 08 Javascript
js jquery分别实现动态的文件上传操作按钮的添加和删除
Jan 13 Javascript
Node.js中require的工作原理浅析
Jun 24 Javascript
JavaScrip调试技巧之断点调试
Oct 22 Javascript
基于jquery实现简单的手风琴特效
Nov 24 Javascript
JavaScript常用函数工具集:lao-utils
Mar 01 Javascript
基于Vue.js实现数字拼图游戏
Aug 02 Javascript
vue计算属性时v-for处理数组时遇到的一个bug问题
Jan 21 Javascript
javascript数据类型中的一些小知识点(推荐)
Apr 18 Javascript
JavaScript实现简单随机点名器
Nov 21 Javascript
JavaScript通过代码调用Flash显示的方法
Feb 02 #Javascript
AngularJS中$interval的用法详解
Feb 02 #Javascript
AngularJS中处理多个promise的方式
Feb 02 #Javascript
AngularJS数据源的多种获取方式汇总
Feb 02 #Javascript
多种JQuery循环滚动文字图片效果代码
Jun 23 #Javascript
三种AngularJS中获取数据源的方式
Feb 02 #Javascript
原生JS实现拖拽图片效果
Aug 27 #Javascript
You might like
解析在apache里面给php写虚拟目录的详细方法
2013/06/24 PHP
PHP迭代器的内部执行过程详解
2013/11/12 PHP
php查看网页源代码的方法
2015/03/13 PHP
PHP基于phpqrcode生成带LOGO图像的二维码实例
2015/07/10 PHP
php实现图片等比例缩放代码
2015/07/23 PHP
PHP7.3.10编译安装教程
2019/10/08 PHP
JS获取scrollHeight问题想到的标准问题
2007/05/27 Javascript
弹出广告特效(一个IP只弹出一次)的代码
2007/07/27 Javascript
JavaScript的面向对象方法以及差别
2008/03/31 Javascript
jQuery textarea的长度进行验证
2009/05/06 Javascript
遨游,飞飞,IE,空中网 浏览器无提示关闭方法
2011/07/11 Javascript
查看源码的工具 学习jQuery源码不错的工具
2011/12/26 Javascript
JavaScript 验证码的实例代码(附效果图)
2013/03/22 Javascript
JQuery为页面Dom元素绑定事件及解除绑定方法
2014/04/23 Javascript
JavaScript学习笔记之JS事件对象
2015/01/22 Javascript
javascript实现英文首字母大写
2015/04/23 Javascript
基于BootStrap Metronic开发框架经验小结【一】框架总览及菜单模块的处理
2016/05/12 Javascript
微信小程序 progress组件详解及实例代码
2016/10/25 Javascript
webpack学习教程之publicPath路径问题详解
2017/06/17 Javascript
解决Nodejs全局安装模块后找不到命令的问题
2018/05/15 NodeJs
微信小程序实现星星评价效果
2018/11/02 Javascript
vue+Element-ui实现分页效果实例代码详解
2018/12/10 Javascript
微信小程序云开发 生成带参小程序码流程
2019/05/18 Javascript
[16:56]教你分分钟做大人:司夜刺客
2014/10/30 DOTA
Python实现LRU算法的2种方法
2015/06/24 Python
总结用Pdb库调试Python的方式及常用的命令
2016/08/18 Python
Python 单元测试(unittest)的使用小结
2018/11/14 Python
Pandas DataFrame中的tuple元素遍历的实现
2019/10/23 Python
Python 3.10 的首个 PEP 诞生,内置类型 zip() 迎来新特性(推荐)
2020/07/03 Python
详解python中的异常和文件读写
2021/01/03 Python
CSS3 transforms应用于背景图像的解决方法
2019/04/16 HTML / CSS
兰蔻加拿大官方网站:Lancome加拿大
2016/08/05 全球购物
中国电子产品外贸网站:MiniIntheBox
2017/02/06 全球购物
英国领先的在线礼品店:Getting Personal
2019/09/24 全球购物
国际经济与贸易专业求职信
2014/07/10 职场文书
七年级之开学家长寄语35句
2019/09/05 职场文书