2015-11-01 |

AngularJS教程 - 基本概念的认识与第一个例子

AngularJS教程 - 基本概念的认识与第一个例子

一、前言

前端技术的发展是如此之快,各种优秀技术、优秀框架的出现简直让人目不暇接,作为一名业界新秀,紧跟时代潮流,学习掌握新知识自然是不敢怠慢。当听到AngularJs这个名字并知道是google在维护它时,便一直在关注,看到其在国外已经十分火热,可是国内的使用情况却有不小的差距,参考文献/网络文章也很匮乏。朝思暮想良久,决定深入学习angular,并写系列博客,一方面作为自己学习路程上的记录,另一方面也给有兴趣的同学一些参考。

首先我自己是一名学习者,会以学习者的角度来整理我的行文思路,故该系列博客也不能叫做教程,只能是些探索,有理解或是技术上的错误还请大家指出。其次我特别喜欢编写小例子来把一件事情说明白,故在文中会尽可能多的用示例加代码讲解,我相信这会是一钟比较好的方式。最后,我深知在现有条件下对于angular的学习会困难重重,不过我更相信坚持的力量,所以谨以此文作为日后学习的动力,让我们一起来走进angular的世界吧~

二、AngularJs是什么

这个定义一定要定准了,AngularJs(后面就简称ng了)是一个用于设计动态web应用的结构框架。首先,它是一个框架,不是类库,是像backbone一样提供一整套方案用于设计web应用。它不仅仅是一个javascript框架,因为它的核心其实是对HTML标签的增强,有图有真相,请看官网描述:

AngularJS教程 - 基本概念的认识与第一个例子

何为HTML标签增强?其实就是使你能够用标签完成一部分页面逻辑,具体方式就是通过自定义标签、自定义属性等,这些HTML原生没有的标签/属性在ng中有一个名字:指令(directive)。后面会详细介绍。那么,什么又是动态web应用呢?与传统web系统相区别,web应用能为用户提供丰富的操作,能够随用户操作不断更新视图而不进行url跳转。ng官方也声明它更适用于开发CRUD应用,即数据操作比较多的应用,而非是游戏或图像处理类应用。

为了实现这些,ng引入了一些非常棒的特性,包括模板机制、数据绑定、模块、指令、依赖注入、路由。通过数据与模板的绑定,能够让我们摆脱繁琐的DOM操作,而将注意力集中在业务逻辑上。这些我将在以后的学习中一一研究。

另外一个疑问,ng是MVC框架吗?还是MVVM框架?官网有提到ng的设计采用了MVC的基本思想,而又不完全是MVC,因为在书写代码时我们确实是在用ng-controller这个指令(起码从名字上看,是MVC吧),但这个controller处理的业务基本上都是与view进行交互,这么看来又很接近MVVM。让我们把目光移到官网那个非醒目的title上:“AngularJS — Superheroic JavaScript MVW Framework”。

好吧,MVW。W—whatever。随便是MV什么好了,所以也有人写为了MV*。其实纠结这个也真没必要,等今后对整个框架熟悉了,其中结构自然了然于心。

三、开始运行Angular

有了一个大概的朦胧的了解就够了,我相信很多概念在使用的过程中会慢慢清晰。我迫不及待的想要让angular运行起来了。动手~

AngularJS教程 - 基本概念的认识与第一个例子结果:

AngularJS教程 - 基本概念的认识与第一个例子

在html标签里, 我们用一个ng-app标识符标明这是一个AngularJS应用。这个ng-app标识符会使AngularJS自动初始化你的应用。 我们用script标签来加载AngularJS脚本: <script src="http://apps.bdimg.com/libs/angular.js/1.2.8/angular.min.js">

通过设置<input>标签里的ng-model属性, AngularJS会自动对数据进行双向绑定。我们还同时进行了一些简单的数据验证:

当页面加载完后,AngularJS会依照input标签中声明的模型名字(qty、cost)生成同名变量。你可以把这些变量认为是MVC设计模式中的M(Model);

注意上面的input元素有着特殊的能力。如果你们没有输入数据或者输入的数据无效,这个input输入框会自动变红。输入框的这种新特性,能让开发者更容易实现CRUD应用里常见的字段验证功能。

最后,我们可以来看一下这个神秘的双大括号{{}}了:这个{{表达式}}标记是AngularJS的数据绑定。其中的表达式可以是表达式和过滤器{{ expression | filter }}的组合。AngularJS提供了过滤器来对输入输出数据格式化。

上面的这个例子里,{{}}里的表达式让AngularJS把从输入框中获得的数据相乘,然后把相乘结果格式化成本地货币样式,然后输出到页面上。

值得一提的是,我们既没有调用任何AngularJS的方法,也没有像用框架一样去编写某个具体逻辑,就完成了上述功能。这个实现的背后是因为浏览器做了比以往静态页面更多的工作,让它能满足动态WEB应用的需要。AngularJS使得动态WEB应用的开发门槛降到不需要类库或者框架的程度。

AngularJS的理念

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

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

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

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

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

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

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

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

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

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

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

Angular是MVVM模式中的佼佼者,而且是google主持开发的,未来会有更大的可能性。

发表评论

    评价:
    验证码: 点击我更换图片