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 ...
随机推荐
- 新手向-同步关键字synchronized对this、class、object、方法的区别
synchronized的语义 实验 分析 在看源代码时遇到多线程需要同步的时候,总是会看见几种写法,修饰方法.修饰静态方法.synchronized(Xxx.class).synchronized( ...
- JavaBean的实用工具Lombok(省去get、set等方法)
转:https://blog.csdn.net/ghsau/article/details/52334762 背景 我们在开发过程中,通常都会定义大量的JavaBean,然后通过IDE去生成其属性 ...
- angular 如何使用第三方组件ng-bootstrap
1.在你的项目中以下指令 npm install --save @ng-bootstrap/ng-bootstrap 安装完成会显示 + @ng-bootstrap/ng-bootstrap@1 ...
- Python开发环境(2):启动Eclipse时检测到PYTHONPATH发生改变
OS:Windows 10家庭中文版,Eclipse:Oxygen.1a Release (4.7.1a),PyDev:6.3.2 4月25日,在Eclipse上安装了PyDev(前面博文有记录),并 ...
- java基础67 JavaScript通过关系找节点、添加附件(网页知识)
1.通过关系找节点(父子关系,兄弟关系) 1.1.常用方法 parentNode:获取当前元素的父节点. childNodes:获取当前元素的所有下一级子元素 firstChild:获取当 ...
- DEDECMS去除后门隐患和漏洞以及冗余代码的方法
链接:http://jingyan.baidu.com/article/4d58d541195bdb9dd4e9c029.html 工具/原料 织梦网站管理系统 sublime编辑器 方法/步骤 第一 ...
- delphi TComponent类(1)
来自:http://blog.csdn.net/lailai186/article/details/7442383 ------------------------------------------ ...
- SSIS 学习之旅 FTP访问类
这章把脚本任务访问FTP的方法 全部给大家. 控件的使用大家如果有不懂得可以看下我之前的文章.第一章:SSIS 学习之旅 第一个SSIS 示例(一)(上) 第二章:SSIS 学习之旅 第一个SSIS ...
- CCF CSP 201703-5 引水入城(50分)
CCF计算机职业资格认证考试题解系列文章为meelo原创,请务必以链接形式注明本文地址 CCF CSP 201703-5 引水入城 问题描述 MF城建立在一片高原上.由于城市唯一的水源是位于河谷地带的 ...
- 1975: [Sdoi2010]魔法猪学院
k短路,只会写A*的飘过..priority_queue超空间差评!