WebUI practice using Angularjs for independent development (simulated backstage)

Conditions and Objectives:

1. The front-end uses ANGULARJS, and interface services are accessed using $http.
2. Negotiate with the backend interface, completely independent parallel development, do not wait for the background to develop the interface for page testing.
3. Need to participate in the Gulp packaging system, that is, before packaging can simulate the background interface test, and after packaging is the release version, the need for real background services to participate.
4. While not all cases can be included, most data-based scenarios are practical.

Practice Method:

2. Create gulp packaged chunks in index.html, start with <!--Build:js js/app.min.js-->, and end with <!--/build-->.
4. Reference Angular-mocks.js (analog HTTP data back plug-in) in index.html.
5. Create Testapi/mockinit.js (used to initialize the data simulation framework) with the following code:

   Angular.module (' mocktest ', [' ngmocke2e ']). Run (function($httpBackend) {varhttp=$httpBackend; //PassHttp.whenget (/*.html/). PassThrough ();    Http.whenget (/*.js/). PassThrough ();    Http.whenget (/*.css/). PassThrough (); Http.whenget (/*.jpg/). PassThrough ();//TestloginHttp.whenpost (appurl+ '/service/user/login '). Respond (function(m,url,data) {varparam =Angular.fromjson (data); varret = {"Result":-1, "message": "Test password Error"}; }        return[200, ret]; });});

   View Code

7. create additional test modules based on functionality, such as testapi/moudlexxxmock.js:

    angular.module (' Mocktest '). Run (  ($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

    

9. In the index.html package block, refer to all the JS files in the Testapi directory:

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

   View Code

11. Putting this project into a Web container, running an unpackaged program, and testing the processing logic for all pages and returning data is no longer required for background Web services to participate.
13. Create an empty mockjs, such as Gulpmock.js, with the following code:

    Angular.module (' Mocktest ', []);

15. Gulpfile, in packaging JS, do not package Testapi in the JS, and packaging gulpmock.js, the generated app.min.js has no simulation of the background interface, directly using the background service interface.

Conclusion:

Although I do not know whether this method is contrary to the original intention of the mock, but do in independent development and independent testing to achieve better results, non-ANGULARJS engineering can refer to Mockjax.

WebUI practice using Angularjs for independent development (simulated backstage)