angularJS简介及其特点—— 五大特性,加快 Web 应用开发
AngularJS 是谷歌的一个 JavaScript 框架,旨在简化前端应用程序的开发。
一. 关于和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 良好的应用程序结构——代码模块化
通常情况下,我们编写 JavaScript 没有明确的结构。虽然在编写小应用程序的时候没有问题,但这显然是不适合于大规模的应用程序。使用 AngularJS,您可以通过MVC(模型 - 视图 - 控制器)或MVVM (模型 - 视图 - 视图模型)模式来组织源代码。 AngularJS 是一个 MVW 框架,其中W代表可以用于任何项目。你可以组织你的代码模块,它可显著提高应用程序的可测试性和可维护性。每个模块的代码独立拥有自己的作用域,model,controller等。
#2 双向数据绑定
数据绑定肯定是 AngularJS 最佳功能之一。你可以声明绑定的模型到 HTML 元素。当模型Model发生变化时,视图View会自动更新,反之亦然。这可以减少大量的传统样板代码,保持模型和视图同步。
#3 指令
AngularJS 指令让你使用 HTML 新语法快速的构建应用程序。您可以创建可重用的自定义组件与指令的API。强大的directive可以将很多功能封装成HTML的tag,属性或者注释等,这大大美化了HTML的结构,增强了可阅读性;例如,如果你想自定义日期选择器小部件,你可以创建一个<data-picker/ >组件。如果你想要一个奇特的文件上传与进度指示器可以继续创建一个<file-upload/ >组件。很酷,不是吗?
#4 HTML 模板
AngularJS 使用 HTML 模板,这使事情变得简单,并允许设计人员和开发人员同时工作。设计人员可以按照通常的方式创建用户界面,而开发人员可以使用声明性绑定语法很容易配合不同的UI组件的数据模型。
#5 可嵌入、注入和测试
关于 AngularJS 的最好的事情是,它是一个很好的团队成员。它从来没有要求全面承诺。AngularJS 官方网站说,你可以根据你需要使用尽可能多或尽可能少的在项目中使用 AngularJS。如果你只需要双向数据绑定,您可以引入 Angular,只是使用此功能。
AngularJS 支持依赖注入的开箱即用。如果你需要的东西,你只要调用 Angular 来注入。将这种后端语言的设计模式赋予前端代码,这意味着前端的代码可以提高重用性和灵活性,未来的模式可能将大量操作放在客户端,服务端只提供数据来源和其他客户端无法完成的操作;就这么简单。这巨大的提高可测试性,因为你可以很容易地在测试的模拟组件。
AngularJS 在创建时候始终考虑着可测试性(测试驱动开发)。这些模块和依赖注入系统,使得单元测试和端对端测试更容易。此外, AngularJS 提供了一个称为量角器工具,这使得终端到终端的测试变得轻而易举。所以,你开发的代码始终是可测试性和可维护性。
另外推荐参考一篇知乎:http://www.zhihu.com/question/22284218?rf=25116320
这还不是全部! AngularJS 还提供了更多的实用功能,如路由,过滤器,和动画等等。不过,以上几点已足以让我爱上它。
angularJS简介及其特点—— 五大特性,加快 Web 应用开发的更多相关文章
- AngularJS 五大特性,加快 Web 应用开发
AngularJS 是谷歌的一个 JavaScript 框架,旨在简化前端应用程序的开发.如果你在开发单页的应用程序,我敢肯定你已经听说过它.我是 AngularJS 的忠实粉丝,在这篇文章中我将概述 ...
- 返璞归真 asp.net mvc (10) - asp.net mvc 4.0 新特性之 Web API
原文:返璞归真 asp.net mvc (10) - asp.net mvc 4.0 新特性之 Web API [索引页][源码下载] 返璞归真 asp.net mvc (10) - asp.net ...
- 移动端web app开发学习笔记
移动web和pc端web以及web app 移动web开发跟web前端开发差别很小,使用的技术都是html+css+js.手机网页可以理解成pc网页的缩小版加一些触摸特性.在浏览器中进行的网页开发,最 ...
- AngularJS简介与四大特征
1.1 AngularJS简介 AngularJS 诞生于2009年,由Misko Hevery 等人创建,后为Google所收购.是一款优秀的前端JS框架,已经被用于Google的多款产品当中.A ...
- Angularjs简介
很久没有系统学习一个新技术了,angularjs将会比较系统的讲解这个技术的语法.应用.次类型的博客将会持续更新,博主也是一个初学者,如果有问题欢迎留言讨论. angularjs简介. angular ...
- C#设计模式总结 C#设计模式(22)——访问者模式(Vistor Pattern) C#设计模式总结 .NET Core launch.json 简介 利用Bootstrap Paginator插件和knockout.js完成分页功能 图片在线裁剪和图片上传总结 循序渐进学.Net Core Web Api开发系列【2】:利用Swagger调试WebApi
C#设计模式总结 一. 设计原则 使用设计模式的根本原因是适应变化,提高代码复用率,使软件更具有可维护性和可扩展性.并且,在进行设计的时候,也需要遵循以下几个原则:单一职责原则.开放封闭原则.里氏代替 ...
- nginx简介(轻量级开源高并发web服务器:大陆使用者百度、京东、新浪、网易、腾讯、淘宝等)(并发量5w)(一般网站apache够用了,而且稳定)
nginx简介(轻量级开源高并发web服务器:大陆使用者百度.京东.新浪.网易.腾讯.淘宝等)(并发量5w)(一般网站apache够用了,而且稳定) 一.总结 1.在连接高并发的情况下,Nginx是A ...
- Angular企业级开发(1)-AngularJS简介
AngularJS介绍 AngularJS是一个功能完善的JavaScript前端框架,同时是基于MVC(Model-View-Controller理念的框架,使用它能够高效的开发桌面web app和 ...
- AngularJS学习之旅—AngularJS 简介(一)
一.AngularJS 简介 1.AngularJS 是一个 JavaScript 框架. AngularJS 是一个 JavaScript 框架.它是一个以 JavaScript 编写的库.Angu ...
随机推荐
- MyBatis 总结记录
1.1MyBatis简介 MyBatis 是一个可以自定义SQL.存储过程和高级映射的持久层框架.MyBatis 摒除了大部分的JDBC代码.手工设置参数和结果集重获.MyBatis 只使用简单的XM ...
- Python构造方法、析构方法和单例模式
一.__init__()方法 __init__()通常在初始化一个类实例的时候调用,如: class Student(object): def __init__(self,name,age): sel ...
- HTML5 localStorage、sessionStorage 作用域
一.localStorage localStorage有效期:永不失效,除非web应用主动删除. localStorage作用域:localStorage的作用域是限定在文档源级别的.文档源通过协议. ...
- python网络编程-进程锁
一:进程锁的作用 进程锁是防止多进程并发执行在屏幕打印的时候,其他进程也输出数据到屏幕,而出现混乱现象. 比如:进程池中很多进程会向同一个日志文件中打印日志 二:代码 # -*- coding:utf ...
- 使用html+css+js实现计算器
使用html+css+js实现计算器,开启你的计算之旅吧 效果图: 代码如下,复制即可使用: <!DOCTYPE html><html lang="en"> ...
- java 局部内部类
可以在代码块里创建内部类,典型的方法是在一个方法体的里面创建,局部内部类不能有访问说明符,因为它不是外围类的一部分,但是可以访问当前代码块的常量,以及此外围类的所有成员,下面分别对局部内部类和匿名内部 ...
- TypeScript 2 : 获取当前日期及前后范围日期【Array】
前言 今天有个接口字段需求,要写一个今天及前几天的日期传过去: 在网上找了下都木有什么比较好的方案:就自己写了一个. 因为技术栈就是NG2+TS2+WEBPACK,这里的代码需要一定的TS2及ES6的 ...
- SQL语句添加删除修改字段[sql server 2000/2005]
用SQL语句添加删除修改字段1.增加字段 alter table docdsp add dspcodechar(200)2.删除字段 ALTER TABLE table_NAME ...
- C# 在RichTextBox根据内容自动调整高度
private void richTextBox1_ContentsResized(object sender, ContentsResizedEventArgs e) { richTextB ...
- CCF CSP 201509-4 高速公路
CCF计算机职业资格认证考试题解系列文章为meelo原创,请务必以链接形式注明本文地址 CCF CSP 201509-4 高速公路 问题描述 某国有n个城市,为了使得城市间的交通更便利,该国国王打算在 ...