angular简介和其特点介绍


Posted in Javascript onJanuary 29, 2015

以前开发(web或者移动端)前端主要使用jQuery+原生js,如果使用某些前端UI框架的话,它自己还可能提供一些API可以使用。而且目前很多UI框架都是基于jQuery的,所以说一下由jQuery跨到angularjs跨度较大,研究了一段时间的angularjs ,下面从整体上说说感受吧:

关于和jquery的比较

首先angular是一个mvc框架,它与jquery不同之处在于,前者致力于mvc代码解耦,采用model,controller以及view方式去组织代码,而后者提供给你了很多APi函数,你可以不用写很多原生js去实现比较复杂的效果,比如说动画,$.animate,这样的效果如果需要原生js来写的话,代码量将会比较庞大;

其次,jQuery没有定义你的代码如何组织,你可以将它放在一个单独的js文件中进行引用,也可以直接写在页面中采用script标签进行包裹,甚至可以直接以内联的方式写在html标签中,但是angularjs会将一个HTML页面分成若干个模块,每个模块都可以自己的scope,service以及directive,各个模块之间也可以进行通信,但是整体上结构是比较清晰的,就是说其代码组织方式是模块化的。

最后,jQuery的思想是先设计好页面,然后在已有页面的基础上进行dom操作后展示页面,但是angular的view可能仅仅是一个框架,对view的dom操作或者时间监听都是在directive中实现的,而且一般情况下很少自己直接去写Dom操作代码,只要你监听model。model发生变化后view也会发生变化。

关于适用场合

jQuery应该适用于大多数web开发,移动端也有(jQuerymobile),angularjs有人说更适合做SPA(我个人认为在手机上的SPA可能会引发性能上的问题,因为它的脏检查机制会影响性能),在web端,一些CRUD的应用或者管理类软件还是可以使用的(当然这里的理解可能不一定准确,会随着深入学习更多去了解和使用)。

关于UI的结合

开发任何产品都需要用到前端UI,目前很多UI是基于jQuery的,这意味着你如果要用angularjs和这些Ui组件的话,需要用angularjs的directive去重写些组件,这一过程是比较麻烦的,所幸的是,angular给我们提供了一些UI组件可以使用(web端主要是结合bootstrap前端组件),http://angular-ui.github.io/,而在移动端主要是结合ionic框架http://ionicframework.com/,但是随着angular的发展,很多HTML5的前端框架也慢慢集成了angularjs版本可供使用。

关于angularjs的特点

1.数据的双向绑定:这可能是其最激动人心的特性吧,view层的数据和model层的数据是双向绑定的,其中之一发生更改,另一方会随之变化,这不用你写任何代码!(想想jQuery方式下怎么做吧)

2.代码模块化,每个模块的代码独立拥有自己的作用域,model,controller等。

3.强大的directive可以将很多功能封装成HTML的tag,属性或者注释等,这大大美化了HTML的结构,增强了可阅读性;

4.依赖注入,将这种后端语言的设计模式赋予前端代码,这意味着前端的代码可以提高重用性和灵活性,未来的模式可能将大量操作放在客户端,服务端只提供数据来源和其他客户端无法完成的操作;

5.测试驱动开发,angularjs一开始就以此为目标,使用angular开发的应用可以很容易地进行单元测试和端对端测试,这解决了传统的js代码难以测试和维护的缺陷

以上就是研究angularjs一段时间得出的结论,其中某些地方可能有所疏漏,没关系,接下来会展开其中某一点一步步去学习。

Javascript 相关文章推荐
JS获取浏览器版本及名称实现函数
Apr 02 Javascript
JS+CSS设置img在DIV中只显示Img垂直居中的部分
Oct 24 Javascript
阻止事件(取消浏览器对事件的默认行为并阻止其传播)
Nov 03 Javascript
7个jQuery最佳实践
Jan 12 Javascript
APP中javascript+css3实现下拉刷新效果
Jan 27 Javascript
浅谈javascript中的call、apply、bind
Mar 06 Javascript
jquery模拟多级复选框效果的简单实例
Jun 08 Javascript
JavaScript实现获取用户单击body中所有A标签内容的方法
Jun 05 Javascript
JavaScript在控件上添加倒计时功能的实现代码
Jul 04 Javascript
JavaScript判断浏览器和hack滚动条的写法
Jul 23 Javascript
vue项目中api接口管理总结
Apr 20 Javascript
详解vue组件基础
May 04 Javascript
javascript实现获取浏览器版本、操作系统类型
Jan 29 #Javascript
浅谈javascript中自定义模版
Jan 29 #Javascript
jQuery和AngularJS的区别浅析
Jan 29 #Javascript
node.js中的forEach()是同步还是异步呢
Jan 29 #Javascript
Node.js事件循环(Event Loop)和线程池详解
Jan 28 #Javascript
使用Sticker.js实现贴纸效果
Jan 28 #Javascript
javascript实现瀑布流自适应遇到的问题及解决方案
Jan 28 #Javascript
You might like
Eclipse中php插件安装及Xdebug配置的使用详解
2013/04/25 PHP
destoon会员注册提示“数据校验失败(2)”解决方法
2014/06/21 PHP
PHP使用GIFEncoder类生成的GIF动态图片验证码
2014/07/01 PHP
php限制文件下载速度的代码
2015/10/20 PHP
php写一个函数,实现扫描并打印出自定目录下(含子目录)所有jpg文件名
2017/05/26 PHP
PHPCrawl爬虫库实现抓取酷狗歌单的方法示例
2017/12/21 PHP
调试Javascript代码(浏览器F12及VS中debugger关键字)
2013/01/25 Javascript
在ASP.NET中使用JavaScript脚本的方法
2013/11/12 Javascript
jQuery+PHP打造滑动开关效果
2014/12/16 Javascript
avalon js实现仿google plus图片多张拖动排序附源码下载
2015/09/24 Javascript
浅析jQuery Ajax请求参数和返回数据的处理
2016/02/24 Javascript
原生JS封装ajax 传json,str,excel文件上传提交表单(推荐)
2016/06/21 Javascript
vuejs2.0运用原生js实现简单的拖拽元素功能示例
2017/02/24 Javascript
Angular实现搜索框及价格上下限功能
2018/01/19 Javascript
聊聊Vue 中 title 的动态修改问题
2019/06/11 Javascript
ES6 Array常用扩展的应用实例分析
2019/06/26 Javascript
原生js实现随机点名功能
2019/11/05 Javascript
Python中random模块用法实例分析
2015/05/19 Python
使用Python脚本生成随机IP的简单方法
2015/07/30 Python
用PyInstaller把Python代码打包成单个独立的exe可执行文件
2018/05/26 Python
对Tensorflow中的矩阵运算函数详解
2018/07/27 Python
python虚拟环境迁移方法
2019/01/03 Python
python3.6编写的单元测试示例
2019/08/17 Python
Python实现对adb命令封装
2020/03/06 Python
浅谈python多线程和多线程变量共享问题介绍
2020/04/17 Python
详解android与HTML混合开发总结
2018/06/06 HTML / CSS
麦德龙官方海外旗舰店:德国麦德龙超市
2017/12/23 全球购物
美国婴童服装市场上的领先品牌:Carter’s
2018/02/08 全球购物
美丽的现代设计家具:2Modern
2018/07/26 全球购物
机械专业个人求职自荐信格式
2013/09/21 职场文书
就业推荐表自我鉴定
2013/10/29 职场文书
2015年秋季新学期寄语
2015/03/25 职场文书
花木兰观后感
2015/06/10 职场文书
JS Object构造函数之Object.freeze
2021/04/28 Javascript
golang 实用库gotable的具体使用
2021/07/01 Golang
ORACLE中dbms_output.put_line输出问题的解决过程
2022/06/28 Oracle