当前位置:首页>AngularJS>AngularJS教程

AngularJS教程

作者:微学网发布时间:2019-08-11 11:13:31

AngularJS的产生背景

AngularJS是为了克服HTML在构建应用上的不足而设计的。

HTML是一门很好的为静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了。

AngularJS是如何补充HTML的缺陷的

AngularJS通过使用我们称为指令(directives)的结构,让浏览器能够识别新的语法。例如:

  • 使用双大括号{{}}语法进行数据绑定;

  • 使用DOM控制结构来实现迭代或者隐藏DOM片段;

  • 支持表单和表单的验证;

  • 能将逻辑代码关联到相关的DOM元素上;

  • 能将HTML分组成可重用的组件。

什么是AngularJS

AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购。是一款优秀的前端JS框架,已经被用于Google的多款产品当中。

AngularJS有着诸多特性,最为核心的是:MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。

AngularJS 使得开发现代的单一页面应用程序(SPAs:Single Page Applications)变得更加容易。

  • AngularJS 把应用程序数据绑定到 HTML 元素。

  • AngularJS 可以克隆和重复 HTML 元素。

  • AngularJS 可以隐藏和显示 HTML 元素。

  • AngularJS 可以在 HTML 元素”背后”添加代码。

  • AngularJS 支持输入验证。

AngularJS的特点

AngularJS通过为开发者呈现一个更高层次的抽象来简化应用的开发。

如同其他的抽象技术一样,这也会损失一部分灵活性。

换句话说,并不是所有的应用都适合用AngularJS来做。

AngularJS主要考虑的是构建CRUD应用。

幸运的是,至少90%的WEB应用都是CRUD应用。但是要了解什么适合用AngularJS构建,就得了解什么不适合用AngularJS构建。

如游戏,图形界面编辑器,这种DOM操作很频繁也很复杂的应用,和CRUD应用就有很大的不同,它们不适合用AngularJS来构建。

像这种情况用一些更轻量、简单的技术如jQuery可能会更好。

AngularJS的理念

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

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

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

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

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

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

AngularJS能为我们解决哪些痛点?

使用回调

回调会降低代码的可读性,是代码变得零散。
移除像回调之类的常见代码是件好事,大幅移除因为JavaScript这门语言的不足而使你不得不写的代码,从而让应用显得更加清晰。

以编程的方式操作HTML DOM

操作HTML DOM是AJAX应用中很基础的一部分,但它不灵活并且容易出错。

通过声明式的语句,描述UI该怎样随着状态的改变而变化,能让你从低级的DOM操作中解脱出来。

绝大多数Angular的应用开发中,开发者都不需要自己去写低级的操作DOM的代码,尽管如果你非要这样的话,也是可以的。

在用户界面中读写数据

AJAX应用中的绝大多数操作都是CRUD操作。

一个典型的流程是从服务器端取到数据组装成内部对象,然后写到HTML的表单中,在用户对表单进行修改之后,进行表单验证,显示表单验证错误信息,然后将数据重新组装成内部对象,再发给服务器。

在这个流程中有很多重复的代码要写,而Angular消除了在这个流程中几乎所有的重复代码,使得代码看起来只是在描述所有的执行流程,而不是所有的实现细节。

在开始前写大量的初始化代码

一般需要写很多的基础性的代码才能完成一个基本的AJAX的Hello World应用。在Angular的应用中,你可以通过一些服务来初始化应用,这些服务都是以类似于Guice的方式进行依赖注入的。

这会让你很快进入功能开发。另外,你还能完全控制自动化测试的初始化过程。

AngularJS的优点

  • 模板功能强大丰富,并且是声明式的,自带了丰富的Angular指令。

  • 是一个比较完善的前端MVC框架,包含模板,数据双向绑定,路由,模块化,服务,过滤器,依赖注入等所有功能。

  • 自定义Directive(指令),比jQuery插件还灵活,但是需要深入了解Directive的一些特性,简单的封装容易,复杂一点官方没有提供详细的介绍文档,可以通过阅读源代码来找到某些我们需要的东西,如:在directive使用 $parse。

  • ng模块化比较大胆的引入了Java的一些东西(依赖注入),能够很容易的写出可复用的代码,对于敏捷开发的团队来说非常有帮助。

AngularJS的缺点

  • 验证功能错误信息显示比较薄弱,需要写很多模板标签,没有jQuery Validate方便,所以可以自己封装了验证的错误信息提示。

  • ngView只能有一个,不能嵌套多个视图,虽然有angular-ui/ui-router · GitHub 解决,但是貌似ui-router 对于URL的控制不是很灵活,必须是嵌套式的。

  • 对于特别复杂的应用场景,貌似性能有点问题,特别是在Windows下使用chrome浏览器,不知道是内存泄漏了还是什么其他问题,没有找到好的解决方案,奇怪的是在IE10下反而很快。

  • 从1.0.X升级到1.2.X,有比较大的调整,没有完美兼容低版本,升级之后可能会导致一个兼容性的BUG,具体详细信息参考官方文档AngularJS ,对应的中文版本:Angular 1.0到1.2 迁移指南。

  • ng提倡在控制器里面不要有操作DOM的代码,对于一些jQuery 插件的使用,如果想不破坏代码的整洁性,需要写一些directive去封装插件,但是现在有很多插件的版本已经支持Angular了,如:jQuery File Upload Demo。

  • Angular 太笨重了,没有让用户选择一个轻量级的版本,当然1.2.X后,Angular也在做一些更改,比如把route,animate等模块独立出去,让用户自己去选择。