AngularJS入门与进阶(txt+pdf+epub+mobi电子书下载)

作者：江荣波,夏毓彦

出版社：清华大学出版社

格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT

AngularJS入门与进阶试读：

前言

AngularJS是Google公司开发的一款Web前端框架，其源码目前托管在Github上，从其源码的关注度就可以看出AngularJS框架的火热程度。AngularJS提供了一些优秀的特性，例如双向数据绑定、MVC架构模式、指令等，能够在很大程度上降低Web前端开发的难度，因此深受广大Web前端开发人员的喜爱。

AngularJS框架功能虽然强大，但是对于初学者来说入门比较困难，主要是因为AngularJS有别于传统的Web前端框架，指令、路由、服务等概念都是其他前端框架所不具备的。纵观AngularJS图书市场，英文图书居多，而中文图书则以翻译为主，缺少一本真正适合初学者入门的书籍。笔者曾担任CSDN特邀编辑参与AngularJS知识库构建，对AngularJS框架有较深入研究，正巧受清华大学出版社编辑夏毓彦的邀请，希望出版一本AngularJS图书，因而促成了本书的出版。

学习技术的目的通常是希望能够快速用在项目实战中。在选择IT图书时，通常希望以实用为主，专业术语堆砌的书籍容易造成理解困难，所以表述通俗、案例简单且能说明问题的书籍往往受到大家的青睐。本书正好符合这种风格，尽量避免过多的专业术语，每个知识点都附加一个完整的案例，读者可以根据代码结合案例运行效果进行学习。

虽然AngularJS属于Web前端开发技术，但是本书也涉及AngularJS与后端服务交互相关的知识点。对于Web前端开发人员来说，JavaScript语言肯定不陌生，而Node.js使得JavaScript语言能够在操作系统环境下运行。笔者是一名全栈开发工程师，本打算使用Java EE技术发布Web服务，考虑到本书面向的读者主要为Web前端开发人员，为了避免Web服务部署困难，所以最终选择使用Node.js开发服务端接口。另外，本书也介绍了一些基于Node.js的Web前端开发工具，希望能够帮助大家提高日常开发效率。

需要注意的是，本书使用Brackets作为代码编辑器，使用Chrome浏览器作为代码运行与调试工具，读者需要安装这两款工具，然后可以从本书指定的Github勘误页面中获取本书的所有源代码。每个章节源码均放在对应的目录中，例如ch01目录中为第1章所有源码。读者可以将本书所有源码导入Brackets工作空间中，然后通过Brackets编辑器的实时预览工具运行本书的案例代码。

另外，本书从开始写作到完稿总共用了5个月时间，由于个人水平有限，书中难免有一些疏漏，特提供了勘误页面，地址如下：

https://github.com/rongbo-j/angular-book

读者可以在上面的地址中下载随书源码并反馈本书中存在的错误，如有其他AngularJS相关疑问，也可以在该页面进行交流，共同提高！读者也可通过博客或者邮件与笔者进行技术交流。

博客：http://blog.csdn.net/rongbo_j

邮箱：jiangrongbo@gmail.com

最后，感谢清华大学出版社的编辑们，没有你们的帮助，就不会有本书的出版。另外，还要感谢我的家人及同事，你们的支持是我写作的最大动力！编者2017年1月第一部分入门篇第1章走进AngularJS世界1.1　AngularJS简介

AngularJS是Google工程师研发的一款开放源代码JavaScript框架，官方文档中的描述是：完全使用JavaScript编写客户端的技术，同其他历史悠久的Web前端技术（例如HTML、CSS等）配合使用，使得Web开发变得更简单、更高效。它是一款比较有特色的框架，和其他知名度较高的前端框架（例如jQuery、Dojo等）有些不同，AngularJS以HTML作为模板语言并扩展HTML元素及属性，使得应用组件开发保持高度清晰、一致。

注意

HTML标签中尖括号的英文为angular brackets，这便是AngularJS名称的来源。AngularJS源码托管在Github上，源码地址为https://github.com/angular/angular.js/。1.2　搭建AngularJS开发环境1.2.1　选择集成开发工具

正如武侠小说中的剑客闯荡江湖时必须拥有一把锋利的宝剑一样，软件开发者也要配有一款好的开发工具，以提高工作效率，节省开发成本。目前软件市场Web前端开发工具层出不穷，当然适合自己的才是最好的，这里向大家推荐几款相对优秀并且适合AngularJS应用开发的工具。1．WebStorm

WebStorm是JetBrains公司旗下一款Web前端开发工具，也是目前最受欢迎的前端开发工具之一，不论哪种IDE，它们的主要作用无非是代码补全提示、代码重构、代码定位、代码调试。与其他工具相比，WebStorm的主要优势如下：

智能的代码补全，支持JavaScript及HTML补全。代码补全包含了所有流行的JavaScript库，例如jQuery、YUI、Dojo、Prototype、Mootools、AngularJS等。

代码重构，支持重命名、提取变量／函数、内联变量／函数、移动／复制、安全删除、包裹或者去掉外围代码等。

代码定位与错误修复，只需按住Ctrl键单击方法或者变量名，即可跳转到定义处，可以全项目查找方法或者变量并高亮显示，能够快速找到代码中的错误或者需要优化的地方，并给出修改意见。

WebStorm官方网站下载地址为http://www.jetbrains.com/webstorm/。安装完毕后软件界面如图1.1所示。比较遗憾的是，它是一款商业软件，出于学习的目的，读者可以使用试用版，但如果是企业应用开发，就需要到官方网站购买使用权，目前售价为129.00$／年。图1.1　WebStorm软件界面2．Sublime Text

Sublime Text是一款跨平台的代码编辑器，提供了目前主流操作系统（例如Windows、UNIX/Linux、OS X等）的Release版本，支持多种编程语言的语法高亮，拥有优秀的代码自动补全功能，界面简约美观（软件界面如图1.2所示），深受开发者喜爱。

Sublime Text的强大之处在于插件扩展功能。它拥有大量的第三方扩展插件，用户可以根据个人喜好通过插件对编辑器功能进行定制。例如，安装了AngularJS代码提示插件后，可以对AngularJS应用中的关键字、内置指令、服务等进行代码补全。目前最新版本为Sublime Text 3，也是一款收费软件，但是可以无期限试用，且试用版无功能限制。

Sublime Text 3的官方下载地址为http://www.sublimetext.com/3。图1.2　Sublime Text 3开发工具界面3．Brackets

Brackets是大名鼎鼎的Adobe公司发行的一款免费、开源且跨平台的Web前端开发工具，支持Windows、Linux以及OS X等主流平台。

Brackets的特点是简约、优雅、快捷！它没有很多的视图或者面板，也没有太多花哨的功能，核心目标是减少在开发过程中那些效率低下的重复性工作，具有自动刷新浏览器、修改元素的样式后实时预览、强大的代码搜索功能等特性。和Sublime Text不同的是，Sublime Text可支持多种语言，而Brackets专为Web前端开发而生。

开源产品一直比较受大众青睐，因此本书将采用Brackets作为代码编辑器，对案例进行演示。读者可以从Brackets官方网站下载Brackets的安装包，官方网站地址为http://brackets.io/。

在本书写作过程中Brackets的最新版本为1.6，读者可进入Brackets官方网站，如图1.3所示，单击“Download Brackets 1.6”即可下载。Brackets程序主界面如图1.4所示。图1.3　Brackets官方网站图1.4　Brackets程序界面

Brackets除了具有上述优点外，更加让人兴奋的是插件扩展功能。Brackets本身并不支持AngularJS代码补全功能，但是可以通过安装插件的方式进行弥补。AngularJS代码补全插件安装步骤如下：（1）单击File→Extension Manager...菜单或右侧面板的图标，打开插件管理窗口，如图1.5所示。图1.5　Brackets插件管理界面（2）在搜索框中输入“angular”关键字，在查询到的插件列表中单击AngularJS Code Hints插件右侧install按钮即可。

上面介绍的3款集成开发工具都是具有AngularJS代码补全功能的开发工具，读者可根据个人喜好进行选择。本书将使用Brackets进行案例演示。1.2.2　下载与安装AngularJS

AngularJS的安装过程非常简单，通过

JavaScript代码调试一直是前端开发人员比较头疼的问题，近些年随着浏览器功能的增强，大部分浏览器都提供了调试工具，使得Web前端代码调试变得相对简单。Chrome和Firefox浏览器提供的开发人员工具功能相当强大，我们可以从控制台中清楚地看到报错信息，必要时还可以在代码中打上断点，对代码进行逐步跟踪。

以Chrome浏览器为例，假设我们有下面黑体代码所示的一段JavaScript代码。

代码清单：ch01\ch01_02.html ch01_02

接下来我们可以在Chrome浏览器中运行ch01_02.html页面。打开开发人员工具，将会明确地看到一条错误信息（见图1.6）： Uncaught ReferenceError: num is not defined

它告诉我们错误的具体原因是num变量未定义，并指明报错代码的行数，从而使我们可以轻松地定位到错误并进行修正。图1.6　Chrome浏览器调试工具

在本书中我们使用Chrome浏览器作为AngularJS代码调试工具，读者也可根据个人喜好进行选择。从下一节开始，我们将一起学习AngularJS框架的相关概念及使用方法。1.3　第一个AngularJS应用

打开Brackets，新建一个HTML文件，接着我们编写第一个基于AngularJS框架的程序，内容如下：

代码清单：ch01\ch01_03.html

默认情况下，Brackets就是以Chrome作为实时预览浏览器的。安装Chrome浏览器后，单击Brackets右侧面板的闪电图标，或单击File→Live Preview菜单，运行效果如图1.7所示。图1.7　第一个AngularJS应用运行效果1.4　AngularJS应用剖析1.4.1　第一个AngularJS应用解惑

在1.3节中，我们一起完成了第一个AngularJS应用，并看到了运行效果，从未接触过AngularJS的读者可能会产生以下几个疑问：

标签中的ng-app属性是什么？

{{}}嵌套的两个大括号又是什么？

为什么页面显示的内容变成了“Hello World!”和“Hello AngularJS!”？

下面将对这些问题进行解答。

ng-app是AngularJS的一个内置指令，可以出现在任意位置，并有两个作用，一个是启动AngularJS框架，另一个是告诉AngularJS框架从ng-app指令所在标签的开始标签到结束标签之间的所有DOM元素由AnguarJS框架进行管理。

为了证明上面的结论，我们可以把ng-app的位置放到第一个

代码清单：ch01\ch01_04.html

接下来在浏览器中预览ch01_04.html页面，如图1.8所示。页面输出内容发生了变化。图1.8　ng-app指令作用说明案例

这是因为ng-app出现在第一个

{{}}是AngularJS的表达式形式，由两个嵌套的大括号构成，大括号中间为表达式内容，AngularJS会对表达式内容进行解析，然后将表达式结果输出到浏览器。在上面的例子中，表达式内容为字符串字面量，AngularJS会将该字面量输出到页面。1.4.2　AngularJS应用构成元素

在第一个AngularJS例子中，我们已经接触到构成AngularJS应用的一些元素，例如指令、表达式。除此之外，构成AngularJS应用的元素还有很多，一些重要的概念将会在后面用到，这里我们需要先了解一下。

模型（Model）：AngularJS程序中用于展示到页面的数据，本质是一个JavaScript对象。

视图（VIew）：从用户的角度来看，视图就是用户所看到的网页内容；从AngularJS应用的角度来说，视图则是AngularJS指令与表达式经过解析后的DOM元素。

控制器（Controller）：AngularJS应用中用于处理业务逻辑的JavaScript方法。

作用域（Scope）：可以把作用域理解为一个容器，在控制器中可以访问这个容器，然后往容器中放入一些模型数据，在视图中就可以通过表达式将数据展现给用户。

指令（Directives）：扩展的HTML属性或标签，能够被AngularJS框架识别，根据不同的指令执行相应的动作。例如，前面提到的ng-app指令，作为html元素的扩展属性，能够被AngularJS框架识别，从而启动AngularJS框架。

表达式（Expressions）：用于向页面输出信息，在前面已经接触过，下节将会对表达式做更详细的介绍。

模板（Template）：AngularJS以HTML作为模板语言，AngularJS模板实际上就是HTML片段。1.4.3　AngularJS表达式

表达式是AngularJS应用中，最基本也最常用的概念，本小节就对AngularJS表达式做一个详细的介绍。1．表达式的定义方式 {{expression}}

AngularJS框架遇到嵌套的两层大括号时会把嵌套大括号中的内容作为表达式处理。2．表达式中的四则运算

AngularJS表达式支持加减乘除四则运算及字符串拼接运算，例如：

代码清单：ch01\ch01_05.html

在浏览器中的预览效果如下： 1 + 2 = 3 5 - 3 = 2 5 * 3 = 15 10 / 2 = 5 "hello"+"world" = helloworld3．表达式中的逻辑运算

AngularJS表达式除了支持算术运算外，还支持逻辑运算，例如：

代码清单：ch01\ch01_06.html

AngularJS表达式的逻辑运算结果和JavaScript相同，页面输出如下： 1 || 0 = 1 true && false = false4．表达式与作用域

AngularJS表达式可以访问作用域中的数据，把数据输出到HTML页面，例如：

代码清单：ch01\ch01_07.html

在本例中，我们又接触了一个新指令ng-init。该指令用于初始化作用域，在上面的代码中，我们通过ng-init指令向作用域中增加一个person对象和arr数组，然后通过表达式输出person对象的name属性和arr数组的第一个元素。

接下来可以在浏览器中运行ch01_07.html页面，输出内容如下： jane angularjs1.5　本章小结

本章作为本书的第1章，首先阐述了AngularJS是什么，接着介绍了AngularJS开发环境的搭建，并向读者推荐了3款比较优秀的前端开发工具，即WebStorm、Sublime Text和Brackets。这3款工具均能够对AngularJS内置指令、服务等进行代码补全，本书采用Brackets作为代码编写与演示工具，读者也可以根据自己的喜好进行选择。另外，本书使用Chrome浏览器作为代码调试工具，建议读者在学习过程中与本书保持一致。然后介绍了AngularJS框架的下载与安装。在所有准备工作都完成后，我们实现了第一个简单的基于AngularJS框架的应用，并对该AngularJS应用进行了详细的剖析。相信读者通过本章的学习，能够对AngularJS有一个初步的了解。在后面的章节中将会对AngularJS各方面的知识点做更全面的介绍，下一章我们将开始学习AngularJS数据绑定相关的内容。第2章双向数据绑定

数据绑定是AngularJS框架最优秀的特性之一，能够帮助Web前端开发人员在很大程度上减少对DOM的操作，本章我们就来深入学习这种机制。2.1　AngularJS双向数据绑定

数据绑定是AngularJS框架在视图（DOM元素）与作用域之间建立的数据同步机制。所谓“双向”，是指界面的操作能够实时同步到作用域中，作用域中的数据修改也能够实时回显到界面中。

作用域可以被视为一个容器，里面有一些基于key-value的数据。假如在视图中有两个输入框，输入框的name属性分别为uname和pword，如图2.1所示。为了和表单元素建立数据绑定，AngularJS会在作用域中添加两个对应的属性，假如名称也为uname和pword。当用户输入内容发生变化时，AngularJS框架就把表单内容同步到作用域中对应的变量中，而当我们改变作用域中的变量值时，AngularJS又会把修改后的变量值同步到表单中，这就是AngularJS的双向数据绑定。图2.1　AngularJS双向数据绑定图解2.2　ng-model指令

为了建立数据绑定，我们需要用到AngularJS另外一个内置指令ng-model，该指令只能用在表单元素上，使用方法如下：

在input输入框上添加ng-model指令后，AngularJS框架就会在对应的作用域中创建一个uname属性和该输入框进行绑定。

数据绑定是AngularJS最优秀的特性之一，下面以一个案例来说明AngularJS数据绑定机制的好处。假如我们要完成这样一个功能，即把用户在表单中输入的信息动态回显到页面中。

如果使用原生的JavaScript，可以通过document对象的getElementById()方法获取输入框对象，响应输入框的keyup事件，在输入框的keyup事件响应方法中获取输入框内容，然后同样以操作DOM的方式把输入框内容显示到页面中，具体代码如下：

代码清单：ch02\ch02_01.html

上面的代码非常简单，相信读者都能看懂，接下来在浏览器中运行ch02_01.html页面，效果如图2.2所示。图2.2　动态回显用户输入示例

可以看到界面上显示的内容随着输入的改变而动态改变。本例中我们编写了数行JavaScript代码，为了突出AngularJS数据绑定机制的优势，我们再使用AngularJS数据绑定机制来完成这个案例，具体代码如下：

代码清单：ch02\ch02_02.html

在浏览器中运行ch02_02.html页面，就会发现运行效果和上一个案例完全相同，但是本案例中的核心代码仅仅只有下面两行：

如上面的代码所示，我们甚至连一行JavaScript代码都没有编写就完成了这个功能，到底是怎样做到的呢？下面对该应用进行剖析：

上面案例中的ng-app指令用于启动AngularJS应用。需要注意的一点是，当AngularJS遇到ng-app指令时就会创建一个名为$rootSocpe的作用域，该作用域为AngularJS应用的根作用域。

作用域其实是一个简单的JavaScript对象，形式如下： var $rootScope={uname:”江荣波"};

我们把ng-model指令作为属性添加到input标签中，此时AngularJS会在$rootSocpe作用域中添加一个uname属性和input输入框绑定，当我们在input表单中输入内容时，AngularJS会自动把输入的内容同步到作用域的uname属性中，因此我们不需要自己响应input标签的keyup事件去处理。

{{uname}}为AngularJS的表达式形式，可以访问AngularJS作用域里的属性，这里我们使用表达式把uname属性输出到页面中。同时AngularJS还能够监视作用域中数据的变化，当数据发生变化时，页面显示内容也能够得到实时更新。

注意

在上面的例子中，我们向$rootScope作用域中添加属性进行了数据绑定，会造成全局作用域污染，实际项目中并不会这么做，而是把表单和控制器作用域中的属性进行数据绑定。控制器作用域是根作用域$rootScope的子作用域，后面会接触到。2.3　ng-bind指令

ng-bind指令是和数据绑定相关的另一个指令，其作用是实现作用域到视图的单向数据绑定，和表达式功能类似，可用于向界面中输出作用域中的数据，例如2.2节案例中输出uname属性的表达式：

可以替换为：

或者

不同的是，在使用AngularJS表达式{{name}}时，如果遇到网络问题，就会导致AngularJS加载缓慢，我们会看到浏览器直接把AngularJS表达式当作字符串渲染到页面中，这样用户体验将不是很好，所以推荐使用ng-bind指令。ng-bind指令在AngularJS没有加载完毕的时候是不会解析执行的，只有AngularJS加载完毕才会执行。

window.alert()方法会中断JavaScript代码的执行，可以通过alert()方法模拟网络加载延迟的情况，例如：

代码清单：ch02\ch02_04.html

我们可以在浏览器中运行ch02_04.html页面（见图2.3），未经过AngularJS框架解析的表达式内容直接输出到了页面中。图2.3　AngularJS表达式作为字符串渲染到页面示例

相比之下，使用ng-bind指令则不会出现这种现象，但是当我们需要进行运算处理或者使用过滤器对输出内容进行处理时，则必须使用表达式。2.4　数据绑定实例：价格计算器

前面几节我们学习了AngularJS数据绑定的相关知识，本节我们使用这些知识来实现一个简单的价格计算器程序，完整代码如下：

代码清单：ch02\ch02_06.html

如上面的代码所示，首先使用ng-app指令启动AngularJS框架，接着使用ng-init指令在作用域对象中添加两个属性price和num，指定初始值为10和1，然后使用ng-model指令把price、num两个属性和表单元素进行数据绑定，最后我们使用表达式输出price和num的乘积。

在浏览器中运行ch02_06.html，可以看到“单价”输入框和“数量”输入框中的数据默认为10、1，说明作用域中的数据修改能够自动同步到视图中；修改单价输入框和数量输入框的内容分别为100、5，界面中输出总价为500（见图2.4），说明在视图中输入的数据也能够自动同步到作用域中，这便是AngularJS的双向数据绑定机制。图2.4　价格计算器程序2.5　本章小结

数据绑定是AngularJS最优秀的特性之一，也是AngularJS最基础的知识点，本章详细地介绍了什么是AngularJS双向数据绑定及与数据绑定相关的两个指令ng-model和ng-bind的使用，并在最后使用AngularJS数据绑定相关知识完成了一个简单的价格计算器程序。相信读者通过本章的学习，已经理解了数据绑定的精髓。下一章我们开始学习AngularJS的MVC设计思想，然后以MVC思想重构本章的价格计算器程序。第3章AngularJS与MVC3.1　MVC模式简介

如果读者接触过Web服务端编程，就不会对MVC模式陌生。MVC是一种软件架构模式，独立于任何一门语言，于1970年起源于Smalltalk语言，随后随着桌面应用的普及广泛用于桌面应用开发中，发展到今天可谓无处不在。在Java EE领域，基于MVC的框架就有很多，例如较为优秀的Struts、WebWork、Spring MVC等。

MVC是Model（模型）、View（视图）、Controller（控制器）的首字母缩写，MVC的核心思想是把数据的管理、业务逻辑控制和数据的展示分离开，使程序的逻辑性和可维护性更强。它们之间的关系可以用图3.1表示。图3.1　模型、视图、控制器关系图

View（视图）为用户可操作的软件界面，用户通过视图和程序进行交互，在视图中会触发不同的事件，例如单击按钮、输入文字等，不同的事件能够触发控制器执行相应的业务逻辑处理。

Controller（控制器）主要用于响应用户请求，在控制器中可操作模型数据，进行业务逻辑处理，根据处理结果分发到不同的视图。

Model（模型）为程序中的模型数据，是控制器与视图之间传递信息的载体。3.2　AngularJS中的MVC

MVC是一种软件设计思想，并不是一门具体的技术，AngularJS框架中也引入了这种思想，下面就来看一下AngularJS中的MVC分别指的是什么。

Model（模型）：前面章节中提到过的作用域对象（例如$rootScope对象）中的属性。

View（视图）：大家所熟悉的DOM元素，从用户的角度来看就是HTML页面，在View中可以通过AngularJS表达式访问模型数据。

Controller（控制器）：用户自定义的构造方法，作用域中的模型数据可以通过依赖注入的方式注入控制器中。

注意

目前普遍认为AngularJS是一款MVW（Model-View-Whatever）框架，这是因为早期的AngularJS框架比较接近于MVC，而随着新版本代码的重构与API的改进，$scope对象可以认为是由一个方法（Controller）包装后的ViewModel，看上去更接近于MVVM（Model-View-ViewModel）框架，那么到底是MVC还是MVVM呢？不管怎样都行（Whatever），这就是MVW框架的由来。3.2.1　AngularJS控制器的定义

AngularJS控制器是一个构造方法。有些JavaScript编程经验的朋友都知道，JavaScript方法可以作为对象模板实例化对象，当方法作为对象模板时，方法本身即为对象的构造方法。所以我们可以像定义一个普通方法一样定义一个控制器，例如：

除此之外，我们还可以使用模块实例的controller()方法来声明一个控制器。该方法可接收两个参数，第一个参数为控制器名称，第二个参数为一个匿名方法，即控制器的构造方法，具体使用方法如下：

如上面的代码所示，AngularJS框架在window对象中增加了一个全局的angular对象，我们可以调用angular对象的module()方法返回一个模块实例，然后调用模块实例的controller()方法来声明一个控制器。这种方式最为常用，将会在后面的模块化章节中重点介绍。

在上面的案例代码中，我们定义控制器时指定了两个参数，即$scope和$log：$scope是作用域对象，是控制器与视图之间传递信息的载体；$log为AngularJS框架内置的日志服务对象，用于向控制台中输入日志信息。当我们为控制器构造方法指定这两个参数后，表示控制器依赖于这两个对象，控制器实例化时会把这两个对象注入控制器中。

注意

AngularJS 1.3版本之后已不再支持全局控制器，第一种控制器定义方式只适用于AngularJS 1.3之前的版本。3.2.2　控制器对象的实例化

控制器对象的实例化非常简单，需要用到AngularJS内置的ng-controller指令。ng-controller的使用方法和ng-app指令类似，也是作为标签的扩展属性使用，具体如下：

AngularJS框架遇到ng-controller指令时会根据ng-controller指令指定的控制器名称查找控制器构造方法，然后使用对应的构造方法实例化控制器对象，并将控制器依赖的对象注入控制器对象中。

除此之外，ng-controller指令还支持使用as语法指定控制器对象名称，例如：

如上面的代码所示，我们可以使用as语法指定控制器对象的名称为calc。这样做的好处是，可以通过控制器对象名称访问控制器对象的成员属性及成员方法。3.3　使用MVC思想重构价格计算器程序

通过前面两节的学习，我们了解了MVC架构模式的概念及AngularJS框架中控制器的声明与实例化，本节我们就使用所学的知识，以MVC设计思想对第2章的价格计算器程序进行重构，完整案例代码如下：

代码清单：ch03\ch03_01.html

在浏览器中运行ch03_01.html页面，效果和第2章的价格计算器完全相同，不同的是视图中表达式运算操作转移到了控制器中。下面对该段代码进行分析：

ng-controller指令用于实例化控制器对象，当AngularJS框架遇到ng-controller指令时会查找名为CalcController的构造方法实例化构造器对象。

控制器对象实例化时AngularJS会创建一个新的作用域对象，名称为$scope，然后会把$scope对象注入控制器对象中。

接下来使用ng-model指令在作用域对象$scope和input表单之间建立数据绑定，这样在控制器中就能够通过$scope对象访问表单数据了。

我们在控制器中指定$scope对象的price和num属性值初始值分别为10和1，在页面加载时会自动回显到输入框中，所以页面加载时表单中的初始值分别为10、1。

最后在作用域对象中增加一个totalPrice()方法，用于计算价格总和，然后通过AngularJS表达式调用该业务逻辑方法即可。3.4　控制器的作用域范围

前面我们了解到使用ng-controller指令实例化控制器时会产生一个新的作用域对象，而且同一个页面中可以使用多个ng-controller指令来实例化不同的控制器对象。但是需要注意的是，每个控制器对应的作用域对象只能与ng-controller指令所在标签的开始标签与结束标签之间的DOM元素建立数据绑定。为了证明这个观点，我们不妨看一下下面的案例。

代码清单：ch03\ch03_02.html

在浏览器中运行ch03_02.html，打开开发人员工具，效果如图3.2所示。图3.2　控制器作用域范围演示案例

控制台输出内容如下： UserController->name:admin UserController->pword:123456 InfoContoller->name:undefined InfoContoller->pword:undefined InfoContoller->love:足球

在本案例中，使用ng-controller指令实例化了两个控制器UserController和InfoContoller。AngularJS框架自动为每个控制器实例创建一个作用域对象，但是每个作用域对象只能与ng-controller所在的开始标签和结束标签之间的DOM元素进行数据绑定，我们可以通过$log日志服务分别在UserController和InfoContoller中输出$scope作用域对象的属性。由于用户名和密码输入框只能和UserController中的作用域对象进行数据绑定，因此在InfoContoller控制器中输出作用域对象的name和pword属性时输出结果为undefined。3.5　控制器中处理DOM事件

AngularJS应用中的DOM事件处理可以在控制器中完成。AngularJS框架为我们提供了一系列的事件绑定指令，这些指令是在原生的JavaScript事件名称前增加“ng-”前缀，例如ng-click、ng-keyup等。

下面就以一个案例来说明如何在控制器中处理浏览器DOM事件，完整代码如下：

代码清单：ch03\ch03_03.html

试读结束[说明：试读内容隐藏了图片]

下载完整电子书