1.1 需求分析
- 完成了品牌的增删查改功能，但是JS代码和HTML代码都放在一起，并不利于我们后期维护。我们可以在前端代码中也运用MVC的模式，将代码进行分离，提高程序的可维护性。
１.２MVC分层
1.2.1前端基础模块层
在sunny-manager-web/src/main/webapp/js目录下创建base.js：
/** 定义基础模块(不带分页模块) */
var app = angular.module('sunny',[]);
再创建base-pagination.js：（带分页）
/** 定义基础模块(带分页模块) */
var app = angular.module('sunny',['pagination']);
说明：一个用于需要分页功能的页面，一个用于需要分页功能的页面。基础模块，必须有模块才能添加服务和控制器。
1.2.2 前端服务层
服务层：与服务器交互，发送异步请求。（模块添加服务，控制器依赖服务）
A.在sunny-manager-web/src/main/webapp/js下面创建service文件夹。
B.在sunny-manager-web/src/main/webapp/js/service/文件夹下面创建baseService.js文件。
C.在sunny-manager-web/src/main/webapp/js/service/下面创建品牌服务层brandService.js文件。
/** 品牌服务层 */
app.service("brandService", function($http){
});
1.2.3前端控制层
控制器层：调用服务层获取响应数据，并用$scope绑定。（模块添加控制器，控制器依赖服务）
在sunny-manager-web的src/main/webapp/js文件夹下创建controller文件夹，再创建brandController.js：
/** 定义品牌控制器层 */ app.controller('brandController', function($scope, baseService){ /** 定义分页配置信息对象 */ $scope.paginationConf = { currentPage : 1, // 当前页码 totalItems : 0, // 总记录数 itemsPerPage : 10, // 每页显示的记录数 perPageOptions : [10,15,20], // 页码下拉列表 onChange : function() { // 改变事件 $scope.reload(); } }; /** 当下拉列表页码发生改变，重新加载数据 */ $scope.reload = function(){ $scope.search($scope.paginationConf.currentPage, $scope.paginationConf.itemsPerPage); }; /** 定义搜索对象 */ $scope.searchEntity = {}; /** 分页查询品牌 */ $scope.search = function(page, rows){ baseService.findByPage("/brand/findByPage", page,rows, $scope.searchEntity) .then(function(response){ $scope.dataList = response.data.rows; /** 更新总记录数 */ $scope.paginationConf.totalItems = response.data.total; }); }; /** 添加或修改品牌 */ $scope.saveOrUpdate = function(){ var url = "save"; if ($scope.entity.id){ url = "update"; } /** 发送post请求添加品牌 */ baseService.sendPost("/brand/" + url, $scope.entity) .then(function(response){ if (response.data){ /** 重新加载品牌数据 */ $scope.reload(); }else{ alert("操作失败！"); } }); }; /** 显示修改 */ $scope.show = function(entity){ // 把entity的json对象转化成一个新的json对象 $scope.entity = JSON.parse(JSON.stringify(entity));};
/** 定义ids数组封装删除的id */
$scope.ids = [];
/** 定义checkbox点击事件函数 */
$scope.updateSelection = function($event, id){
/** 判断checkbox是否选中 */
if ($event.target.checked){
$scope.ids.push(id);
}else{
/** 从数组中移除 */
var idx = $scope.ids.indexOf(id);
$scope.ids.splice(idx, 1);
}
};
/** 批量删除 */
$scope.delete = function(){
if ($scope.ids.length > 0){
baseService.deleteById("/brand/delete", $scope.ids)
.then(function(response){
if (response.data){
$scope.reload();
}else{
alert("删除失败！");
}
});
}
};
});
1.2.4 修改页面（引入刚刚定义的文件）
去掉sunny-manager-web/src/main/webapp/admin/brand.html原来的js代码，引入刚才我们创建的js：
<script src="/js/base-pagination.js"></script>
<script src="/js/service/baseService.js"></script>
<script src="/js/controller/brandController.js"></script>
2.1 控制器继承（代码重用）
2.1.1 需求分析
- 有些功能是每个页面都有可能用到，比如分页，复选等等，如果我们再开发另外一个功能，还需要重复编写。怎么让这些通用的功能只写一次呢？我们通过继承的方式来实现。
2.1.2 前端代码
2.1.2.1 创建父控制器
在sunny-manager-web/src/main/webapp/js/controller/目录下创建baseController.js
/** 定义基础控制器层 */
app.controller('baseController',function($scope){
/** 定义分页配置信息对象 */
$scope.paginationConf = {
currentPage : 1, // 当前页码
totalItems : 0, // 总记录数
itemsPerPage : 10, // 每页显示的记录数
perPageOptions : [10,15,20], // 页码下拉列表
onChange : function() { // 改变事件
$scope.reload();
}
};
/** 当下拉列表页码发生改变，重新加载数据 */
$scope.reload = function(){
$scope.search($scope.paginationConf.currentPage,
$scope.paginationConf.itemsPerPage);
};
/** 定义ids数组封装删除的id */
$scope.ids = [];
/** 定义checkbox点击事件函数 */
$scope.updateSelection = function($event, id){
/** 判断checkbox是否选中 */
if ($event.target.checked){
$scope.ids.push(id);
}else{
/** 从数组中移除 */
var idx = $scope.ids.indexOf(id);
$scope.ids.splice(idx, 1);
}
};
});
2.1.2.2 修改品牌控制器
sunny-manager-web/src/main/webapp/js/controller/brandController.js：
/** 品牌控制器层 */ app.controller("brandController", function($scope, $controller, baseService){ /** 指定继承baseController */ $controller('baseController',{$scope:$scope}); /** 读取品牌数据绑定到表格中 */ $scope.findAll = function(){ /** 调用服务层查询所有品牌数据 */ baseService.sendGet("/brand/findAll").then(function(response){ $scope.dataList = response.data; }); }; /** 定义搜索对象 */ $scope.searchEntity = {}; /** 分页查询品牌信息 */ $scope.search = function(page, rows){ /** 调用服务层分页查询品牌数据 */ baseService.findByPage("/brand/findByPage",page,rows,$scope.searchEntity) .then(function(response){ $scope.dataList = response.data.rows; /** 更新总记录数 */ $scope.paginationConf.totalItems = response.data.total; }); }; /** 添加与修改品牌 */ $scope.saveOrUpdate = function(){ /** 定义请求URL */ var url = "save"; // 添加品牌 if ($scope.entity.id){ url = "update"; // 修改品牌 } /** 调用服务层 */ baseService.sendPost("/brand/" + url, $scope.entity) .then(function(response){ if (response.data){ /** 重新加载品牌数据 */ $scope.reload(); }else{ alert("操作失败"); } }); }; /** 显示修改，为修改表单绑定当行数据 */ $scope.show = function(entity){ // 把entity的json对象转化成一个新的json对象 $scope.entity = JSON.parse(JSON.stringify(entity));};
/** 批量删除品牌 */
$scope.delete = function(){
if ($scope.ids.length > 0){
/** 调用服务层 */
baseService.deleteById("/brand/delete", $scope.ids).then(
function(response){
if(response.data){
/** 重新加载品牌数据 */
$scope.reload();
}
}
);
}else{
alert("请选择要删除的品牌！");
}
};
});
说明：$controller也是AngularJS提供的一个服务，可以实现伪继承，实际上就是与baseController共享$scope。
2.1.2.3 修改页面
修改sunny-manager-web/src/main/webapp/admin/brand.html页面：引入baseController.js
<script src="/js/base-pagination.js"></script>
<script src="/js/service/baseService.js"></script>
<script src="/js/controller/baseController.js"></script>
<script src="/js/controller/brandController.js"></script>