在前期的開發中，我們有了前觀的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