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 相关文章推荐
Prototype Array对象 学习
Jul 19 Javascript
js loading加载效果实现代码
Nov 24 Javascript
JavaScript中的几个关键概念的理解-原型链的构建
May 12 Javascript
Js实现手机发送验证码时按钮延迟操作
Jun 20 Javascript
jQuery实现的可编辑表格完整实例
Jun 20 Javascript
解析JavaScript实现DDoS攻击原理与保护措施
Dec 26 Javascript
jQuery、layer实现弹出层的打开、关闭功能
Jun 28 jQuery
手把手教你搭建ES6的开发运行环境
Jul 11 Javascript
element-ui中select组件绑定值改变,触发change事件方法
Aug 24 Javascript
javascript自定义日期比较函数用法示例
Jul 22 Javascript
JavaScript实现像雪花一样的Hexaflake分形
Jul 07 Javascript
Vue页面渲染中key的应用实例教程
Jan 12 Vue.js
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
PHP4.04简明安装
2006/10/09 PHP
Zend Framework路由器用法实例详解
2016/12/11 PHP
PHP如何实现阿里云短信sdk灵活应用在项目中的方法
2019/06/14 PHP
JavaScript 版本自动生成文章摘要
2008/07/23 Javascript
js中复制行和删除行的操作实例
2013/06/25 Javascript
javascript内存管理详细解析
2013/11/11 Javascript
javascript中var的重要性分析
2015/02/11 Javascript
jQuery实现选中弹出窗口选择框内容后赋值给文本框的方法
2015/11/23 Javascript
微信小程序中hidden不生效原因的解决办法
2017/04/26 Javascript
详解微信小程序input标签正则初体验
2018/08/18 Javascript
关于微信小程序登录的那些事
2019/01/08 Javascript
Element ui 下拉多选时新增一个选择所有的选项
2019/08/21 Javascript
Vue程序化的事件监听器(实例方案详解)
2020/01/07 Javascript
uniapp,微信小程序中使用 MQTT的问题
2020/07/11 Javascript
VUE中鼠标滚轮使div左右滚动的方法详解
2020/12/14 Vue.js
Python中使用socket发送HTTP请求数据接收不完整问题解决方法
2015/02/04 Python
python通过exifread模块获得图片exif信息的方法
2015/03/16 Python
在Python程序中实现分布式进程的教程
2015/04/28 Python
python中print的不换行即时输出的快速解决方法
2016/07/20 Python
使用Python写CUDA程序的方法
2017/03/27 Python
Python使用SQLite和Excel操作进行数据分析
2018/01/20 Python
python 返回列表中某个值的索引方法
2018/11/07 Python
Python实现字符型图片验证码识别完整过程详解
2019/05/10 Python
win8.1安装Python 2.7版环境图文详解
2019/07/01 Python
将数据集制作成VOC数据集格式的实例
2020/02/17 Python
django处理select下拉表单实例(从model到前端到post到form)
2020/03/13 Python
python爬虫scrapy图书分类实例讲解
2020/11/23 Python
伦敦高级内衣品牌:Agent Provocateur(大内密探)
2016/08/23 全球购物
给定一个时间点,希望得到其他时间点
2013/11/07 面试题
大学生学业生涯规划
2014/01/05 职场文书
班班通项目实施方案
2014/02/25 职场文书
人事专员的岗位职责
2014/03/01 职场文书
学徒工职责
2014/03/06 职场文书
物业总经理助理岗位职责
2014/06/29 职场文书
毕业证丢失证明范本
2014/09/20 职场文书
幼儿园2016年圣诞活动总结
2016/03/31 职场文书