angularJS学习手册(1)

欢迎来到augularJS的学习

一、什么是angularJS?

angular的英文意思是角,为什么要叫angular我也不知道。

AngularJS是一个MV*(Model-View-Whatever,不管是MVC或者MVVM,统归MDV(model Drive View))JavaScript框架,其是Google推出的SPA(single-page-application)应用框架,其为我们的web应用开发增加不少魔法变换。将让你的开发非常爽。AngularJS有着诸多特性,最为核心的是:MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。

没错他是个框架,那jquery是个什么呢?

jquery是个类库。angularJS 和Jquery都是用JS写的。

框架和类库的区别在哪儿?

举个例子:你需要建一个游泳池。游泳池的工程图就是一个框架,建造游泳池用到的挖掘机就是一个类库。

二、angularJS能做什么?

简单来说就是方便你开发web应用(等于没说)。

angularJS主要是用于CRUD的web应用,而像如游戏,图形界面编辑器这些web应用就没有必要使用angularJS

三、使用angularJS需要具备哪些知识?

W3school里面的大部分知识都得具备。

最好有开发过web网站的经验,知道平时开发web应用的麻烦之处,才能体会用angularJS避免这些麻烦的快感~~。

当然,类似angularJS的框架有很多,但基本点理念都是相同的,对其他前端框架有了解的话,学起angularJS会很快速。(比如 node.js【这不是一个框架,而是一个能让JavaScrit运行在服务器上的平台,】,React【一个用于创建用户界面的 JavaScript 库】)

四、angularJS的理念(可不看)

Angular信奉的是,当组建视图(UI)同时又要写软件逻辑时,声明式的代码会比命令式的代码好得多,尽管命令式的代码非常适合用来表述业务逻辑。

将DOM操作和应用逻辑解耦是一种非常好的思路,它能大大改善代码的可调性;

将测试和开发同等看待是一种非常非常好的思路,测试的难度在很大程度上取决于代码的结构;

将客户端和服务器端解耦是一种特别好的做法,它能使两边并行开发,并且使两边代码都能实现重用;

如果框架能够在整个开发流程里都引导着开发者:从设计UI,到编写业务逻辑,再到测试,那对开发者将是极大的帮助;

“化繁为简,化简为零”总是好的。

AngularJS能将你从以下的噩梦中解脱出来:

使用回调:回调的使用会打乱你的代码的可读性,让你的代码变得支离破碎,很难看清本来的业务逻辑。移除一些常见的代码,例如回调,是件好事。大幅度地减少你因为JavaScript这门语言的设计而不得不写的代码,能让你把自己应用的逻辑看得更清楚。

手动编写操作DOM元素的代码:操作DOM是AJAX应用很基础的一部分,但它也总是很“笨重”并且容易出错。用声明的方式描述的UI界面可随着应用状态的改变而变化,能让你从编写低级的DOM操作代码中解脱出来。绝大部分用AngularJS写的应用里,开发者都不用再自己去写操作DOM的代码,不过如果你想的话还是可以去写。

对UI界面读写数据:AJAX应用的很大一部是CRUD操作。一个经典的流程是把服务端的数据组建成内部对象,再把对象编成HTML表单,用户修改表单后再验证表单,如果有错再显示错误,然后将数据重新组建成内部对象,再返回给服务器。这个流程里有太多太多要重复写的代码,使得代码看起来总是在描述应用的全部执行流程,而不是具体的业务逻辑和业务细节。

开始前得写大量的基础性的代码:通常你需要写很多的基础性的代码才能实现一个“Hello World”的应用。用AngularJS的话,它会提供一些服务让你很容易地正式开始写你的应用,而这些服务都是以一种Guice-like dependency-injection式的依赖注入自动加入到你的应用中去的,这让你能很快的进入你应用的具体开发。特别的是,你还能全盘掌握自动化测试的初始化过程。

五、AngularJS的优缺点

优点:
1. 模板功能强大丰富,并且是声明式的,自带了丰富的Angular指令;
2. 是一个比较完善的前端MV*框架,包含模板,数据双向绑定,路由,模块化,服务,过滤器,依赖注入等所有功能;
3. 自定义Directive,比jQuery插件还灵活,但是需要深入了解Directive的一些特性,简单的封装容易,复杂一点官方没有提供详细的介绍文档,我们可以通过阅读源代码来找到某些我们需要的东西,如:在directive使用 $parse;
4. ng模块化比较大胆的引入了Java的一些东西(依赖注入),能够很容易的写出可复用的代码,对于敏捷开发的团队来说非常有帮助,我们的项目从上线到目前,UI变化很大,在摸索中迭代产品,但是js的代码基本上很少改动。
5. 补充:Angular支持单元测试和e2e-testing。

缺点:
1. 验证功能错误信息显示比较薄弱,需要写很多模板标签,没有jQuery Validate方便,所以我们自己封装了验证的错误信息提示,详细参考 why520crazy/w5c-validator-angular · GitHub
2. ngView只能有一个,不能嵌套多个视图,虽然有 angular-ui/ui-router · GitHub 解决,但是貌似ui-router 对于URL的控制不是很灵活,必须是嵌套式的(也许我没有深入了解或者新版本有改进);
3. 对于特别复杂的应用场景,貌似性能有点问题,特别是在Windows下使用chrome浏览器,不知道是内存泄漏了还是什么其他问题,没有找到好的解决方案,奇怪的是在IE10下反而很快,对此还在观察中;
4. 这次从1.0.X升级到1.2.X,貌似有比较大的调整,没有完美兼容低版本,升级之后可能会导致一个兼容性的BUG,具体详细信息参考官方文档 AngularJS ,对应的中文版本:Angular 1.0到1.2 迁移指南
5. ng提倡在控制器里面不要有操作DOM的代码,对于一些jQuery 插件的使用,如果想不破坏代码的整洁性,需要写一些directive去封装插件,但是现在有很多插件的版本已经支持Angular了,如:jQuery File Upload Demo
6. Angular 太笨重了,没有让用户选择一个轻量级的版本,当然1.2.X后,Angular也在做一些更改,比如把route,animate等模块独立出去,让用户自己去选择。

当然使用的人多才会暴露更多的问题,一起为这些问题寻找解决方案是一个社区的良性趋势,选择Angular,的确使我们的开发效率大大提高。

作者:徐海峰
链接:https://www.zhihu.com/question/22284218/answer/20893162
来源:知乎
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

时间: 2024-11-20 04:35:16

angularJS学习手册(1)的相关文章

AngularJS学习手册(1)

怎么来的: Angular 团队想减轻使用 AJAX 开发应用程序的痛苦. 目的: 传递模板和数据到浏览器,然后在浏览器端组装.服务器的 角色变成了只提供模板的静态资源和提供模板所需要的数据 核心思想:MVC 好处体现在:数据绑定 核心机制:依赖注入,指令

Angularjs学习---angularjs环境搭建,ubuntu 12.04下安装nodejs、npm和karma

1.下载angularjs 进入其官网下载:https://angularjs.org/?,建议下载最新版的:https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.7/angular.js 所有版本:https://code.angularjs.org/ 2.示例1 HelloWorld ! 新建一个helloworld.html <!doctype html> <html ng-app> <head> &

AngularJs学习总结-基本特性

现在的前端项目中基本上都会用到angularjs框架,之前并不了解这个框架,也是因为最近接手的项目,所以打算好好的学习下它.之前都是搞pc端,现在接手的是移动端的项目,移动端UI框架用的是ionic+vordova,没有用bootstrap,主要做的是ios+安卓的app界面,ionic这个框架也不太了解,也需要花时间好好熟悉下.angularjs学习小白一枚,欢迎大神指正. AngularJs是什么? 简单来说,即javascript的一个框架,通过script标签添加到网页中.即我们使用an

AngularJS 学习

AngularJS 学习笔记(1) AngularJS是一款前端JS框架.AngularJS官网 http://angularjs.org [开发环境准备]: 1,下载AngularJS:JS and CSS in Solution 2,编辑器 WebStorm,下载地址:https://www.jetbrains.com/webstorm/  (配合最新版JetBrains使用,可以即时无刷新显示更新代码后的效果) 3,下载最新版Chrome,并安装扩展程序:JetBrains IDE Sup

Redis学习手册(目录)

Posted on 2012-04-16 07:40 Stephen_Liu 阅读(29155) 评论(25) 编辑 收藏 为什么自己当初要选择Redis作为数据存储解决方案中的一员呢?现在能想到的原因主要有三.其一,Redis不仅性能高效,而且完全免费.其二,是基于C/C++开发的服务器,这里应该有一定的感情因素吧.最后就是上手容易,操作简单.记得在刚刚接触Redis的时候,由于当时项目的工期相当紧张,留给我们做出选择的空间也是非常有限,一旦技术决策失误,造成的后果也比较严重.所以在做出决定之

SQLite学习手册(目录)

Posted on 2012-03-09 07:36 Stephen_Liu 阅读(11956) 评论(22) 编辑 收藏 在实际的应用中,SQLite作为目前最为流行的开源嵌入式关系型数据库,在系统的架构设计中正在扮演着越来越为重要的角色.和很多其它嵌入式NoSQL数据库不同的是,SQLite支持很多关系型数据库的基本特征,这在数据移植.程序演示等应用中有着不可替代的优势.从官方文档中我们可以获悉到,SQLite支持的数据量和运行效率都是非常骄人的,因此在海量数据的解决方案中,SQLite可以

Git版本控制软件结合GitHub从入门到精通常用命令学习手册

GIT 学习手册简介 本站为 Git 学习参考手册.目的是为学习与记忆 Git 使用中最重要.最普遍的命令提供快速翻阅. 这些命令以你可能需要的操作类型划分,并且将提供日常使用中需要的一些常用的命令以及参数. 本手册将从入门到精通指导大家. 首先,我们要从如何以 Git 的思维方式管理源代码开始. 如何以 GIT 的方式思考(这里可以不用看懂,接着看下面的内容,看完就全懂了.) 懂得 Git,第一件重要的事情就是要知道它与 Subversion.Perforce 或者任何你用过的版本控制工具都有

我的AngularJS 学习之旅

基础篇 1.Angular的 起源 2.比较Web 页面实现的几种方式 3.一些基本术语 4.Angular与其他框架的兼容性 5.总结 6.综合实例 很早之前就听朋友说起AngularJs,但由于各种原因,一直没去研究.最近正好有同事也对这个框架比较感兴趣,大家一起讨论,于是终于“名正言顺”地开始研究了. 本文的目的是记录一下自己这两周的学习点滴,算是学习笔记吧,如果对初学的朋友有一点帮助,那也算是一件好事.嘿嘿 1.Angular的 起源 关于Angular 的起源,可以追溯到2009 年的

AngularJS学习--- 动画操作 (Applying Animations) ngAnimate step 12

1.切换目录 git checkout step-12 npm start 2.效果图 这里在点击右边的缩略图时,会有一个很明显的从下向上的动画过程. 3.代码实现: step11和step12之间的代码差异:https://github.com/angular/angular-phonecat/compare/step-11...step-12 Dependencies(依赖的js库): bower.json { "name": "angular-seed", &