体验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 相关文章推荐
响应鼠标变换表格背景或者颜色的代码
Mar 30 Javascript
js里的prototype使用示例
Nov 19 Javascript
jquery设置按钮停顿3秒不可用
Mar 07 Javascript
JavaScript中的Math 使用介绍
Apr 21 Javascript
JavaScript常用的弹出广告及背投广告实现方法
Feb 06 Javascript
js正则表达式验证邮件地址
Nov 12 Javascript
谈谈我对JavaScript DOM事件的理解
Dec 18 Javascript
教你用十行node.js代码读取docx的文本
Mar 08 Javascript
es6学习笔记之Async函数基本教程
May 11 Javascript
鼠标拖动改变DIV等网页元素的大小的实现方法
Jul 06 Javascript
在Vue项目中引入JQuery-ui插件的讲解
Jan 27 jQuery
layui复选框限制选择个数的方法
Sep 18 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
PHP Session_Regenerate_ID函数双释放内存破坏漏洞
2011/01/27 PHP
PHP面向对象学习笔记之一 基础概念
2012/10/06 PHP
PHP获取MAC地址的具体实例
2013/12/13 PHP
PHP+Mysql树型结构(无限分类)数据库设计的2种方式实例
2014/07/15 PHP
VB中的RasEnumConnections函数返回632错误解决方法
2014/07/29 PHP
yii2使用GridView实现数据全选及批量删除按钮示例
2017/03/01 PHP
php nginx 实时输出的简单实现方法
2018/01/21 PHP
关于laravel后台模板laravel-admin select框的使用详解
2019/10/03 PHP
PHP如何使用array_unshift()在数组开头插入元素
2020/09/01 PHP
基于PHP实现发微博动态代码实例
2020/12/11 PHP
Mootools 1.2教程 Tooltips
2009/09/15 Javascript
javascript中定义类的方法详解
2015/02/10 Javascript
NodeJS的Promise的用法解析
2016/05/05 NodeJs
JS中位置与大小的获取方法
2016/11/22 Javascript
微信小程序wx.previewImage预览图片实例详解
2017/12/07 Javascript
vue组件中watch props根据v-if动态判断并挂载DOM的问题
2019/05/12 Javascript
Vue-cli4 配置 element-ui 按需引入操作
2020/09/11 Javascript
Echarts在Taro微信小程序开发中的踩坑记录
2020/11/09 Javascript
[03:34]2014DOTA2西雅图国际邀请赛 淘汰赛7月15日TOPPLAY
2014/07/15 DOTA
Python实现从百度API获取天气的方法
2015/03/11 Python
python中尾递归用法实例详解
2015/04/28 Python
Python多维/嵌套字典数据无限遍历的实现
2016/11/04 Python
Python 中urls.py:URL dispatcher(路由配置文件)详解
2017/03/24 Python
如何理解Python中包的引入
2020/05/29 Python
Python中常用的os操作汇总
2020/11/05 Python
纯CSS实现的大小渐变、渐远效果
2014/04/15 HTML / CSS
Styleonme中文网:韩国高档人气品牌
2017/06/21 全球购物
12月小学生校园广播稿
2014/02/04 职场文书
《爱如茉莉》教后反思
2014/04/12 职场文书
党的群众路线教育实践活动个人剖析材料
2014/10/07 职场文书
婚前协议书范本
2014/10/27 职场文书
文明单位申报材料
2014/12/23 职场文书
电影地道战观后感
2015/06/04 职场文书
采购部2015年度工作总结
2015/07/24 职场文书
利用Python网络爬虫爬取各大音乐评论的代码
2021/04/13 Python
Apache SkyWalking 监控 MySQL Server 实战解析
2022/09/23 Servers