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

一、前言

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

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

二、AngularJs是什么

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

何为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运行起来了。动手~

结果：

在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主持开发的，未来会有更大的可能性。