# 增加删除按钮 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`。 至此，前端的基本开发讲解完毕。其实的更复杂的操作，其实现的步骤基本如此。无非就是找到接口，传对数据，然后按返回的数据进行接收后并处理。细节还待我们在实际开发中具体掌握。