在前期的开发中，我们有了前观的C,V层，也对后台进行了初步的开发，获取了原始数据。本节中，让我们共同开发前台的M层，以实现与后台及前台C层的对接。 # 新建M层 ``` panjiedeMacBook-Pro:WebApp panjie$ yo angular:service klass create app/scripts/services/klass.js create test/spec/services/klass.js ``` 有了前面teacher的经验。klass.js相对就变得简单一些了。我们稍加改动: klass.js ``` 'use strict'; /** * @ngdoc service * @name webAppApp.klass * @description * # klass * Service in the webAppApp. */ angular.module('webAppApp') .service('klass', function(server) { /** * 获取当前页的教师 * @param {string} name 查询教师的名字 * @param {int} page 第几页 * @param {int} pageSize 每页多少条 * @param {Function} callback 回调函数 * @return {[type]} * @author 梦云智 http://www.mengyunzhi.com * @DateTime 2017-01-21T19:05:55+0800 */ var paginate = function(name, page, pageSize, callback) { // 进行http POST请求. // 由于是post请求方式，所以即便是我们在项目中存在paginate.json文件 // 但如果我们查看控制台，仍然会发现有错误产生，同时，没有正确的接收到数据 server.http({ method: 'POST', url: '/Klass.json', data: { name: name, page: page, pageSize: pageSize } }, function(response) { callback(response); }); }; // Public API here return { // 获取全部教师信息 paginate: function(name, page, pageSize, callback) { return paginate(name, page, pageSize, callback); }, }; }); ``` 单元测试： 当我们有了后台做支撑时，在进行资源请求时，完全可以直接对接后台。从而省略在单元测试中手动输入返回值。 所以：单元测试中我们仅进行语法测试： ``` 'use strict'; describe('Service: klass', function() { // load the service's module beforeEach(module('webAppApp')); // 注入config ,直接引用config中的api地址。 var klass, $httpBackend, config; beforeEach(inject(function(_klass_, _$httpBackend_, _config_) { klass = _klass_; config = _config_; // 引用项目配置 $httpBackend = _$httpBackend_; // 定义请求 URL var url = config.apiRootPath + '/Klass.json'; // 定义返回数据, 仅定义正确的返回码。 var data = {code:200}; // 进行模似数据请求配置.当请求方法为post，资源名为url时, 返回data数据. $httpBackend.when('POST', url).respond(data); })); it('检测语法是否出现错误', function() { // 调用方法 klass.paginate('', 1, 2, function() {}); // 模拟数据请求 $httpBackend.flush(); }); }); ``` 保存文件后，没有出现异常信息，即为代码书写正正确. # C与M对接 ``` 'use strict'; /** * @ngdoc function * @name webAppApp.controller:KlassIndexCtrl * @description * # KlassIndexCtrl * Controller of the webAppApp */ angular.module('webAppApp') .controller('KlassIndexCtrl', function($scope, config, klass) { // 初始化 var klasses = []; $scope.page = 1; // 第几页 $scope.pageSize = 3; // 每页大小 $scope.totalCount = 10; // 总条数 $scope.name = ''; // 查询条件 $scope.isDebug = config.isDebug; // 开发模式 // 为当前页增加active样式 var activeClass = function(index) { if ($scope.page === index) { return 'active'; } else { return ''; } }; // 用户点击分页触发 var changePage = function (index) { $scope.page = index; paginate(); }; // 分页查询 var paginate = function() { klass.paginate($scope.name, $scope.page, $scope.pageSize, function(response) { $scope.page = response.page; $scope.klasses = response.klasses; $scope.totalcount = response.totalCount; }); }; // 初始化 var int = function() { paginate(); }; int(); $scope.query = paginate; $scope.klasses = klasses; $scope.activeClass = activeClass; $scope.changePage = changePage; }); ``` 此时，我们按开发规范，进行测试。 <table> <tr> <th>name</th> <th>page</th> <th>pageSize</th> <th>code</th> <th>klasses</th> <th>page</th> <th>totalCount</th> <td>说明</td> </tr> <tr> <td>""</td> <td>1</td> <td>3</td> <td>200</td> <td>大小为3的数组</td> <td>1</td> <td>7</td> <td></td> </tr> <tr> <td>一</td> <td>2</td> <td>2</td> <td>200</td> <td>大小为2的数组，且每项中班级名均包含有 一 的字样</td> <td>2</td> <td>4</td> <td></td> </tr> </table>  至此，前台班级列表，开发完毕，等待后台开发完毕后，进行集成测试。 <hr /> > git checkout -f step12.1.4