14分布式电商项目 - 前端分层以及控制器继承

代码下载地址：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。

控制器继承

有些功能是每个页面都有可能用到的，比如分页，复选等等，如果我们再开发另一个功能，还需要重复编写。怎么能让这些通用的功能只写一次呢？我们通过继承的方式来实现。

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