数据库：MySql 5.5

2.2 关键技术介绍

2.2.1 核心架构

经过对项目需求的理解和整体模块的划分，可以很容易得得到一个树形结构，整个项目为根节点，也就是第一层路由，学生、教师、管理员、登录等常规操作为第二层路由，当然这一层路由和上一层路由一样，大部分情况下没有实际的功能，只是一个容器，第三层路由中分别对应的各个模块的具体业务。

在AngularJS中，我们将前期的路由架构搭建好，放在一个名为config.router的JavaScript文件中，每一个路由对应一个templateURL和Controller(单纯的容器层可以不需要)，在开发具体业务时，只需要写页面，在对应的控制器中创建数据模型并调用service层的服务和后端进行交互。

2.2.2 关键技术

本小节将着重介绍一下系统中用到的一些关键性技术。

(1) 双向数据绑定

大部分的模板框架，如jQuery，对于页面模板的渲染都是一个单向的线性过程：一个数据模型和模板混合在一起的页面。这意着开发者需要大量的DOM操作来完成预期的效果。AngularJS采用双向数据绑定，即用户在view层对数据模型的值进行修改时会映射到model层，model的数据变化也会影响到view层。

(2) 指令

指令可以说是AngularJS最核心也是最难理解的内容。前端开发人员在拿到

UI原型时，一般都会通过CSS现将UI实现，再往上面加上各种方法，这是正

常的开发模式。但往往很多时候这个UI组件需要被复用，或者配置项不是固定的，比如说一个进度条，如图2-1所示。

图2-1 进度条指令

很明显，这个组件的配置项（现在有4个），但是因为业务需要很可能配置成更多或者减少。这时候AngularJS的指令就能发挥作用了，我们将这个组件抽

出模板，对外开放一个传输数据的入口，通过外部传入数据即可配置出不同的进度条，一次封装，多次使用，下面代码为实际使用方式。

<progress-bar options="options" selected-id="selectedId"></progress-bar>

(3) Promise

在浏览器的环境中充斥着异步事件[2]，如XHR、延时处理等，在异步请求中，以往都会通过回调函数来处理事件，当只有一个回调函数时，这种方式很好用，但当回调事件变多时，就会一层嵌一层，不仅难于理解，而且很难维护，很容易调入回调地狱。

Promise API的出现解决了这一问题，在开发过程中，可以通过promise进行链式调用。可以看出promise实际上是一个对象，这个对象暴露出两个方法，rosolve()和reject(),当promise执行成功返回前者，失败返回后者。通过和拦截器配合，在开发过程中只需要执行第一个函数即可。

(4) 拦截器

前后端进行http交互时，经常会遇到一些意想不到的错误，如500,503等错误，如果对每中错误都在响应返回（response）后进行处理,显然很不合理。这时候我们就需要拦截器在响应返回前，讲错误的返回码拦截，并根据errResponse。Status来进行对应的处理；相似的，也可以对请求发出前进行检查。源`自*优尔?文.论~文`网[www.youerw.com

拦截器使用了上面介绍的promise API，在接受服务端返回的promise的同时也会返回一个promise，这个返回的promise将会交给请求发出者处理。

2.3 本章小结

本章主要对关键技术AngularJS以及由AngularJS搭建的架构核心进行介绍，毫无一万，这种由路由展开的架构很适合和高校教务系统之类的单页面应用。