02. AngularJS-----分层书写AngularJS代码（前端）
1. 怎么分层？
1.我们在html页面中书写AngularJS代码，会使代码量太多，不好管理，所以我们首先使用外链式来引用js代码。
2.而js代码，我们可以把它们分层（controller层和service层），并把可以共用的代码抽离出来并使controller层继承它
*AngularJS可以拥有继承关系
3.controller层（控制层）主要书写逻辑代码
4.service层（服务层）主要写要提交的json的链接
2. 具体实现
- 抽取共用代码，当做父类（controller层）:这些代码其他页面也可以用，所以抽取出来，其他页面直接继承不用再次书写
//定义模块
var app=angular.module('pinyougou',['pagination']);//这句话也可以单独抽取出来，第二个参数是分页模块的引用
//品牌控制层
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);//删除
}
}
$scope.jsonToString=function(jsonString,key){
var json= JSON.parse(jsonString);
var value="";
for(var i=0;i<json.length;i++){
if(i>0){
value+=",";
}
value +=json[i][key];
}
return value;
}
});
- 继承父类（controller层）：这里是品牌页面，继承了一个共用的js
//控制层
app.controller('brandController' ,function($scope,$controller,brandService){
$controller('baseController',{$scope:$scope});//继承
//读取列表数据绑定到表单中
$scope.findAll=function(){
brandService.findAll().success(
function(response){
$scope.list=response;
}
);
}
//分页
$scope.findPage=function(page,rows){
brandService.findPage(page,rows).success(
function(response){
$scope.list=response.rows;
$scope.paginationConf.totalItems=response.total;//更新总记录数
}
);
}
//查询实体
$scope.findOne=function(id){
brandService.findOne(id).success(
function(response){
$scope.entity= response;
}
);
}
//保存
$scope.save=function(){
var serviceObject;//服务层对象
if($scope.entity.id!=null){//如果有ID
serviceObject=brandService.update( $scope.entity ); //修改
}else{
serviceObject=brandService.add( $scope.entity );//增加
}
serviceObject.success(
function(response){
if(response.success){
//重新查询
$scope.reloadList();//重新加载
}else{
alert(response.message);
}
}
);
}
//批量删除
$scope.dele=function(){
//获取选中的复选框
brandService.dele( $scope.selectIds ).success(
function(response){
if(response.success){
$scope.reloadList();//刷新列表
$scope.selectIds=[];
}
}
);
}
$scope.searchEntity={};//定义搜索对象
//搜索
$scope.search=function(page,rows){
brandService.search(page,rows,$scope.searchEntity).success(
function(response){
$scope.list=response.rows;
$scope.paginationConf.totalItems=response.total;//更新总记录数
}
);
}
});
- service层：这样写的好处是方便修改提交链接
//服务层
app.service('brandService',function($http){
//读取列表数据绑定到表单中
this.findAll=function(){
return $http.get('../brand/findAll.do');
}
//分页
this.findPage=function(page,rows){
return $http.get('../brand/findPage.do?page='+page+'&rows='+rows);
}
//查询实体
this.findOne=function(id){
return $http.get('../brand/findOne.do?id='+id);
}
//增加
this.add=function(entity){
return $http.post('../brand/add.do',entity );
}
//修改
this.update=function(entity){
return $http.post('../brand/update.do',entity );
}
//删除
this.dele=function(ids){
return $http.get('../brand/delete.do?ids='+ids);
}
//搜索
this.search=function(page,rows,searchEntity){
return $http.post('../brand/search.do?page='+page+"&rows="+rows, searchEntity);
}
//下拉列表数据
this.selectOptionList=function(){
return $http.get('../brand/selectOptionList.do');
}
});
3. AngularJS在html中的一些使用
- 首先要引入 AngularJS 插件
<!-- AngularJS 插件 -->
<script type="text/javascript" src="../plugins/angularjs/angular.min.js"></script>
<!-- 分页组件开始 -->
<script src="../plugins/angularjs/pagination.js"></script>
<link rel="stylesheet" href="../plugins/angularjs/pagination.css">
<!-- angularjs代码 -->
<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/baseController.js"></script>
<script type="text/javascript" src="../js/controller/brandController.js"></script>
<!-- 分页组件结束 -->
- 点击激活AngularJS 函数（）
//这里的$event参数是指本身，可以从它本身获取的它的状态，或者各种属性（具体看上面的使用）
<td><input type="checkbox" ng-click="updateSelection($event, entity.id)" ></td>
<td>{{entity.id}}</td>
<td>{{entity.name}}</td>
<td>{{entity.firstChar}}</td>
<td class="text-center">
<button type="button" class="btn bg-olive btn-xs" data-toggle="modal" data-target="#editModal" ng-click="findOne(entity.id)" >修改</button>
</td>
//ng-click:点击激活函数，中间的参数是这个循环中带的参数
<button type="button" class="btn bg-olive btn-xs" data-toggle="modal" data-target="#editModal" ng-click="findOne(entity.id)" >修改</button>
</td>