数据模拟在项目前后端分离时尤为重要，再也不用找后端加测试数据，再也不用等后端写完接口在对接功能。利用数据模拟，在敲定Api设计和数据格式后即可开展项目开发。一般的项目直接引入mock.js库即可模拟接口数据，简单粗暴，但是在angularJs项目中直接引入是行不通的，因为它有自带的测试工具angular-mock，遗憾的是angular-mock`不支持mock语法，注意：工具的版本要和angularjs版本一致，不然会报错。更多详细配置见官方文档。

1. HTML页面（index.html）和工具引入

1
2
3
4
5
6
7
8
9
10
11
<!--省略-->
<body ng-app='routingDemoApp'>

</body>
<script src="https://cdn.bootcss.com/angular.js/1.5.8/angular.js"></script>
<script src="https://cdn.bootcss.com/angular.js/1.5.8/angular-route.js"></script>
<script src="https://cdn.bootcss.com/angular-mocks/1.5.8/angular-mocks.js"></script>
<script type="text/javascript" src="/Scritps/router.js"></script>
<script type="text/javascript" src="/Scripts/controller.js"></script>
<script type="text/javascript" src="/Scritps/devMock.js"></script>
<!--省略-->

2. 定义路由（router.js）

1
2
3
4
5
6
7
8
9
10
11
12
13
var routingDemoApp = angular.module('routingDemoApp', ['ngRoute', 'ngMockE2E']);
routingDemoApp.config(['$routeProvider', function ($routeProvider) {
    $routeProvider
    $routeProvider.when('/', {
        templateUrl: '/Home/Index',
        controller: 'IndexController',
    })
    $routeProvider.when('/About', {
        templateUrl: '/Home/About',
        controller: 'AboutController',
    })
    //......
}]);

定义一个module，引入ngRoute、ngMockE2E作为主应用的依赖模块，配置路由的视图和控制器。

3. 定义mock（devMock.js）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
routingDemoApp.run(['$httpBackend', function ($httpBackend) {
    var users = {
        "code": 1,
        "data": [{
            "UserID": 1,
            "UserName": "小红",
            "MaxDevice": 10,
            "Remark": "...",
            "DeviceNum": 5,
            "ScriptName": "脚本1"
        }, {
            "UserID": 2,
            "UserName": "小名",
            "MaxDevice": 20,
            "Remark": "...",
            "DeviceNum": 8,
            "ScriptName": "脚本2"
        }, {
            "UserID": 3,
            "UserName": "小康",
            "MaxDevice": 45,
            "Remark": "...",
            "DeviceNum": 20,
            "ScriptName": "脚本3"
        }],
        "pageCount": 1,
        "Count": 3
    };
  //mock拦截排除的资源和目录
    $httpBackend.whenGET(/\/View\/*/).passThrough();
    $httpBackend.whenGET(/ *.js/).passThrough();
    $httpBackend.whenGET(/ *.css/).passThrough();
    $httpBackend.whenGET(/ *.jpg/).passThrough();

    //用户列表api
    $httpBackend.whenPOST("/api/GetUser", { token: "", pindex: 1, pagesize: 999 }).respond(200, users);
}])

4. 定义Index控制器（controller.js）

1
2
3
4
5
6
7
routingDemoApp.controller('IndexController', ['$scope', '$http', '$location', function ($scope, $http, $location) {
  $http.post("/api/GetUser",{ token: "", pindex: 1, pagesize: 999 }).then(function(json){
    console.log(json.data);
  },function(err){
    console.log(err);
  });
}])

只要模块引入正确，路由配置正确，mock书写正确，数据分分钟console.log，接下来你可以独立开发angularJs项目了。