引言
今天老大给了新任务，在开始给我说的时候让我改造一个指引，上面的流程是比较简单的，所以在开始的时候没有当回事，因为对这些东西比较熟悉了，但是在说完需求以后告诉我这个项目不创建后台，所有的流程操作都在前台完成，这一下子就整懵逼了，没有后台数据怎么办，那些流程的流转咋弄，结果老大说数据只需要模拟一份就可以了，不需要入库，但是上面的什么流程启动，发送，保存功能都需要实现。
在网上找了一些基于angular模拟后台数据的方法，最终确定用ngMockE2E来实现，关于ngMockE2E的说明是这样的：
The ngMockE2E is an angular module which contains mocks suitable for end-to-end testing. Currently there is only one mock present in this module - the e2e $httpBackend mock.
其实ngMockE2E的工作原理这样的：如果我们在module中引入了ngMockE2E这个模块，页面中的所有的请求则不会真正的请求到后台，而是被其中的$httpBackend拦截，$httpBackend会提供相应的get、post、put、delte请求，一旦请求地址和提供的地址想匹配则执行相应的方法。
简单总结一下这么做的好处：
1、如果你并不是接口api的开发者，使用mock数据你就不用等待接口api设计完成就可以开始本地开发
2、如果你自己开发接口的api，使用mock数据不仅可以让你更专注于前端开发，还不比纠结于后端具体的细节实
3、你可以快速的开发内容而不用管后台逻辑
4、建立mock服务还可以帮助你设计接口api的结构
5、mock数据服务还可以给其他angular组件在对应服务上做单元测试用
下面开始我们的Demo：
我们需要在html（index.html）页面引入2个文件 angular.js angular-mocks.js
<span style="font-size:18px;"><span style="font-size:18px;"><!DOCTYPE html> <html ng-app="app"> <head> <meta charset="utf-8" /> <title>AngularJS Plunker</title> <script src="angular.js"></script> <!--<script src="angular-resource.js"></script>--> <script src="angular-mocks.js"></script> <script>document.write('<base href="' + document.location + '" />');</script> <!--<link rel="stylesheet" href="style.css" />--> <script src="app.js"></script> </head> <body ng-controller="MainCtrl"> <p>All students:</p> <ul> <li ng-repeat="student in students">{{ student.name }}</li> </ul> <p>Student1: {{ ada.name }}</p> </body> </html></span></span>
所需要的文件我已经上传到csdn，在文章末尾有下载地址；
下面来看我们的app.js文件的内容，首先看看我们的module以及依赖的模块
<span style="font-size:18px;"><span style="font-size:18px;">var app = angular.module('app', [ 'ngMockE2E' ]);</span></span>
下面来完成我们的$httpBackend的定义，它的定义式需要通过一个run模块来完成的，在我们的demo中我们把它添加到一个run模块中，然后定义一组students
<span style="font-size:18px;"><span style="font-size:18px;">app.run(['$httpBackend', function($httpBackend) { students= [ { id: 1, name: 'Ada Lovelace', phone: '8445551815' }, { id: 2, name: 'Grace Hopper', phone: '8445551906' }, { id: 3, name: 'Charles Babbage', phone: '8445556433' } ]; // $httpBackend interactions are defined here... }]);</span></span>
这个students数组是mock backbend所有的操作都可以操作的，就像我们后台的数据库一样，这是我我们创建前台模拟数据库的一种方式，另外几种创建方式读者自行学习。
下面我们先简单的来模拟一个查询学生的接口，用get方式请求后返回整个学生集合。
<span style="font-size:18px;"><span style="font-size:18px;">// Query; returns all students. $httpBackend.whenGET('/students').respond(students<span style="font-family: SimSun;">);</span></span></span>
我们你需要发出一个get请求，请求地址为“/studnets”,则可以接收到所有的学生。
<span style="font-size:18px;"><span style="font-size:18px;"> $http.get("/students").success(function (data) { $scope.students= data; }) </span></span>
这样我们就可以在页面中循环输出所有的学生的姓名。
下面我们来实现保存的方法，也就是想students数组中增加一条新纪录，利用post请求携带student数据。
<span style="font-size:18px;"><span style="font-size:18px;">// Save; create a new contact. $httpBackend.whenPOST('/students').respond(function(method, url, data) { var newStudent = angular.fromJson(data); students.push(newStudent); return [200, newStudent, {}]; });</span></span>
因为angular组件会把数据当作json来处理且不会复查，所以一定要注意将序列化的学生数据转成json。创建一条新的纪录就像在students数组push一条数据一样简单。如果我们想要在对象中获取一条学生记录就需要做两件事情：从URL中获取ID，根据id在数组中取值。
$httpBackend.whenGET(/\/students\/(\d+)/, undefined, ['id']).respond(function(method, url, data, headers, params) { var student= findStudentById(params.id); if (student== null) { return [404, undefined, {}]; } return [200, student, {}]; });
我们用一个正则匹配url，获取到id的集合。angular把匹配的到的结果保存到params的id属性上，也就是whenGET方法的第三个入参。再抓去这个值传到findStudentById方法中，将查询的结果返回给我们。最后，我们返回查询结果，如果为空就返回404。
下面我们看一下findStudentById的方法的代码：
function findStudentById(id) { var studentId = Number(id); var matches = students.filter(function(student) { return student.id === studentId; }); var student = matches.shift(); return student; }
下面来介绍更新的方法，和get方法是差不多的：
$httpBackend.whenPUT(/\/students\/(\d+)/, undefined, undefined, ['id']).respond(function(method, url, data, headers, params) { var student = findstudentById(params.id), parsedData = angular.fromJson(data); if (student == null) { return [404, undefined, {}]; } angular.extend(student, parsedData); return [200, student, {}]; });
同样我们根据在URL截获的id参数在数组中查询到对应的数据记录，然后利用angular.extend方法将数据记录更新。
删除方法同样和上面的get或者put方法类似，先根据ID查找到相应的记录，然后删除。
$httpBackend.whenDELETE(/\/students\/(\d+)/, undefined, ['id']).respond(function(method, url, data, headers, params) { var student = findstudentById(params.id); if (student == null) { return [404, undefined, {}]; } // Replace students array with filtered results, removing deleted student. students.splice(students.indexOf(student), 1); return [200, undefined, {}]; });
通过上面的GET、PUT、DELETE、POST等操作我们已经完成了对后台的服务的模拟和数据的定义，到这我们的后台模拟就已经完成了，下面就是定义我们应用控制器，在这控制器我们将对服务进行调用来完成对后台操作的模拟。
app.controller('MainCtrl', function($scope,$http) { var tempData= { name: '晓儿', phone: '1221212212', sex:'男' }; $http.post("/students",tempData).success(function (data) { console.log(data); }) $http.put("/students/1",tempData).success(function (data) { console.log(data); }) $http.delete("/students/2").success(function (data) { console.log(data); }) $http.get("/students").success(function (data) { $scope.students = data; }) });
在这这个demo中我只是给大家简单的打印了一下，没有进行详细的显示，但是原理都是比较容易懂得，demo到这给大家介绍的也差不多了，希望对大家有帮助。
再这在给大家介绍一个在上面demo中没有写的一个用法，就是API文档中提到的passThrough关键字，看一下这个东西的基本用法：
$httpBackend.whenGET(/\/views\//, undefined, undefined).passThrough();
很多时候我们会遇到请求页面地址的问题，但是我们并不希望在这个请求被拦截，让页面的渲染被阻止，也不需要返回数据，这就需要我们的passThrough,像上面那样符合请求地址的，则不进行阻拦。
PS:demo下载地址：点我下载
