代码下载地址：https://github.com/ylw-github/pingyougou.git
版本号：c98e409fba0faa91f8d6fdb94e30a2efc718d907
在上一章节完成的品牌管理的增删改查功能。但是我们看代码，JS 和 html 都放在一起，并不利于我们后期的维护。我们可以在前端代码中也运用 MVC 的设计模式，将代码进行分离，提高程序的可维护性。
自定义服务
在 AngularJS 中，服务是一个函数或对象，可在你的 AngularJS应用中使用。我们在上次课中使用了内置服务$http.其实我们也可以自己来定义服务，而服务会封装一些操作。我们在不同的控制器中可以调用同一个服务，这样服务的代码将会被重用。
我们现在就修改一下我们的品牌管理代码，使用自定义服务。
var app=angular.module('pinyougou', ['pagination']);//定义模块 //品牌服务层 app.service('brandService',function($http){ //读取列表数据绑定到表单中 this.findAll=function(){ return $http.get('../brand/findAll.do'); } //其它方法省略....... }); //品牌控制层 app.controller('brandController' ,function($scope,brandService){ //读取列表数据绑定到表单中 $scope.findAll=function(){ brandService.findAll().success( function(response){ $scope.list=response; } ); } //其它方法省略........ });
代码分离
我们刚才已经将与后端交互的部分放入自定义服务，目的是不同的控制层都可以重复调用服务层方法。所以我们还需要将代码分离出来，以便调用。
1.前端基础层
在 pinyougou-manager-web 工程 js 下创建 base.js文件：
var app=angular.module('pinyougou',[]);
创建 base_pagination.js文件：
var app=angular.module('pinyougou',['pagination']);
一个用于不需要分页功能的页面，一个用于需要分页功能的页面.
2. 前端服务层
在 pinyougou-manager-web 工程 js 下创建 service 文件夹,创建 brandService.js:
//品牌服务层 app.service('brandService',function($http){ //读取列表数据绑定到表单中 this.findAll=function(){ return $http.get('../brand/findAll.do'); } //其它方法省略........ });
3.前端控制层
在 pinyougou-manager-web 的 js 文件夹下创建BrandController.java:
//品牌控制层 app.controller('brandController' ,function($scope,brandService){ //读取列表数据绑定到表单中 $scope.findAll=function(){ brandService.findAll().success( function(response){ $scope.list=response; } ); } //其它方法省略........ });
4.修改页面
去掉 brand.html 原来的 JS 代码，引入刚才我们建立的 JS。
<script type="text/javascript" src="../js/base_pagination.js"> </script> <script type="text/javascript" src="../js/service/brandService.js"> </script> <script type="text/javascript" src="../js/controller/brandController.js"> </script>
控制器继承
有些功能是每个页面都有可能用到的，比如分页，复选等等，如果我们再开发另一个功能，还需要重复编写。怎么能让这些通用的功能只写一次呢？我们通过继承的方式来实现。
1.建立父控制器
在 pinyougou-manager-web 的 js/controller 目录下建立 baseController.js：
//基本控制层 app.controller('baseController' ,function($scope){ //重新加载列表 数据 $scope.reloadList=function(){ //切换页码 $scope.search( $scope.paginationConf.currentPage, $scope.paginationConf.itemsPerPage); } //分页控件配置 $scope.paginationConf = { currentPage: 1, totalItems: 10, itemsPerPage: 10, perPageOptions: [10, 20, 30, 40, 50], onChange: function(){ $scope.reloadList();//重新加载 } }; $scope.selectIds=[];//选中的 ID 集合 //更新复选 $scope.updateSelection = function($event, id) { if($event.target.checked){//如果是被选中,则增加到数组 $scope.selectIds.push( id); }else{ var idx = $scope.selectIds.indexOf(id); $scope.selectIds.splice(idx, 1);//删除 } } } );
2.修改品牌控制器层
//品牌控制层 app.controller('brandController' ,function($scope,$controller,brandService){ $controller('baseController',{$scope:$scope});//继承,把 base 的 scope 域传递给子域 //读取列表数据绑定到表单中 $scope.findAll=function(){ brandService.findAll().success( function(response){ $scope.list=response; } ); } //其它方法省略........ });
$controller也是 angular 提供的一个服务，可以实现伪继承，实际上就是与 BaseController 共享$scope
