# 增加刪除按鈕 klass/index.html ``` <td><a ng-href="#!/klass/edit/{{klass.id}}">編輯</a> <button ng-click="del($index, klass)">刪除</button></td> ``` 同時，我們增加發生錯誤或產生消息時的提醒 ``` <div class="row"> <div class="col-md-12"> <div ng-show="message" class="alert alert-success" role="alert">{{message}}</div> <div ng-show="isError" class="alert alert-danger" role="alert">{{errors}}</div> </div> </div> ... ``` # 完善C層 klass/index.js ``` $scope.message = ''; // 消息 $scope.error = ''; // 錯誤消息 // 設置提示消息 var setMessage = function (message) { $scope.message = message; $scope.error = ''; $timeout(function() { $scope.message = ''; }, 1500); } // 設置錯誤提示消息 var setError = function (error) { $scope.error = error; $scope.message = ''; $timeout(function() { $scope.error = ''; }, 1500); } // 刪除, 注意這里的參數，不能使用klass, 原因是：.... var del = function (index, klassEntity) { console.log(index); console.log(klassEntity); }; ... $scope.del = del; ``` 上面，我們定義了兩個setxxx，但由于在下面的代碼中沒有應用，所以會出現兩個警告。等下面完善代碼后就沒有了。 # M層 services/klass.js ``` // 刪除 var del = function (id, callback) { server.http({ method:'GET', url: '/klass.Delete.json?id=' + id, }, function(response) { callback(response); }); }; ... update: update, del: del }; ``` ## 單元測試 ``` ... // 增加del url = config.apiRootPath + '/klass.Delete.json?id=1'; $httpBackend.when('GET', url).respond(data); ... // 調用del klass.del(1, function(){ console.log('klass del 通過'); }); ``` # C層對接 ``` // 刪除, 注意這里的參數，不能使用klass, 原因是：.... var del = function (index, klassEntity) { klass.del(klassEntity.id, function(response) { // 發生錯誤 if (!angular.equals({}, response.errors)) { setError('系統發生錯誤'); console.log(response.errors); // 刪除成功 } else if(response.errorMessages.length === 0) { setMessage('刪除成功'); console.log(index); $scope.klasses.splice(index, 1); // 發生警告 } else { setMessage('系統失敗:' + response.errorMessages.toString()); } }); }; ``` ## 測試  # 總結 由于我們在前期的命名問題，在這里產生了實體與M層的沖突，看來正確的命名還是非常必要的。以后，我們的服務器，全部起名為`xxxServer`。 至此，前端的基本開發講解完畢。其實的更復雜的操作，其實現的步驟基本如此。無非就是找到接口，傳對數據，然后按返回的數據進行接收后并處理。細節還待我們在實際開發中具體掌握。