WebUI实践之使用AngularJS 进行独立开发(模拟后台)

条件与目标：

前端使用AngularJS，接口服务均使用$http访问。
与后台协商好接口，完全独立并行开发，不用等待后台开发完接口才能进行页面测试。
需要gulp打包系统参与，即打包之前可以模拟后台接口测试，而打包之后则为Release版本，需要真实后台服务参与。
虽不能包括所有情况，但大部分基于数据的场景都可实用。

实践方法:

在index.html中创建gulp打包区块，以开始，以结束。
在index.html中引用angular-mocks.js(模拟http数据返回插件)。

创建testapi/mockinit.js(用于初始化数据模拟框架),代码如下:

angular.module('mocktest',['ngMockE2E']).run(function($httpBackend){    
    var http=$httpBackend;
    //pass    

    http.whenGET(/ *.html/).passThrough();
    http.whenGET(/ *.js/).passThrough();
    http.whenGET(/ *.css/).passThrough();
    http.whenGET(/ *.jpg/).passThrough();


    //testlogin
    http.whenPOST(APPURL+'/service/user/login').respond(function(m,url,data){

        var param = angular.fromJson(data);

        var ret = {"result":-1,"message":"测试密码错误"};    
        }
        return [200,ret];
    });


});

View Code

根据功能创建其它测试模块，如testapi/moudlexxxmock.js：

angular.module('mocktest').run(function($httpBackend){

    var http=$httpBackend;

    //test
    http.whenPOST(new RegExp(APPURL+'/service/user/add')).respond(function(m,url,data){

        var ret = {"result":0,"message":""};
        return [200,ret];
    });
});

View Code

在index.html 打包区块中，引用所有的testapi目录下的js文件:

    <script src="testapi/mockinit.js"></script>
    <script src="testapi/moduleusermock.js"></script>
    <script src="testapi/modulexxxmock.js"></script>

View Code

将此工程放入web容器中，运行未打包的程序，测试所有页面与返回数据的处理逻辑，此时已不需要后台web服务参与。
创建一个空的Mockjs，如gulpmock.js,代码如下:
```
angular.module('mocktest',[]);
```
gulpfile中，在打包js时，不打包testapi中的js,而打包gulpmock.js，生成的app.min.js中已没有模拟的后台接口，直接使用后台服务接口。

结论：

　　虽然不知此方法是否为违背mock的初衷，但确实在独立开发与独立测试中取得较好的效果,非AngularJS工程可参考 Mockjax。