Angular的代码分离

1.分层
和页面打交道的放在Controller,层
和我们后端打交道$http代码留在service层
this指代service这个服务,而brandService指代服务名
controller层通过注入服务名,进而获得服务的支持
通过依赖注入在Controller层调用service层的方法

2.前端controller与service层代码分离,
并且通过继承:将Controller共同的方法与属性放入到baseController.js文件进行关联
①抽取出service的代码,放进js文件里

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);
    }
    //service层不能使用$scope获取数据,所以我们需要通过Controller层传参进来searchEntity
    this.search=function (page,rows,searchEntity) {
        return $http.post("../brand/search.do?page="+page+"&rows="+rows,  searchEntity );
    }
    this.add=function(entity){
        return $http.post("../brand/add.do",entity);
    }
    this.update=function(entity){
        return $http.post("../brand/update.do",entity);
    }
    this.findOne=function (id) {
        return  $http.get("../brand/findOne.do?id="+id);
    }
    this.dele=function (ids) {
        return  $http.get("../brand/delete.do?ids="+ids);
    }
})

②
1.抽取Controller公共代码到baseController.js里

app.controller("baseController",function ($scope) {//父控制器

    $scope.searchEntity={ };

    //分页配置
    $scope.paginationConf={
        currentPage: 1,//当前页
        totalItems: 10,//总记录数
        itemsPerPage: 10,//每页记录数
        perPageOptions: [10, 20, 30, 40, 50],//页码选项
        onChange: function(){	//当页码发生变化的时候自动触发的方法
            $scope.reloadList();
        }
    }

    //重新加载记录
    $scope.reloadList=function(){
        $scope.search( $scope.paginationConf.currentPage,$scope.paginationConf.itemsPerPage );
    }


    $scope.selectIds=[];//选中的ID数组
    $scope.updateSelection=function($event,id){
        if($event.target.checked){//判断是否选中
            $scope.selectIds.push( id );

        }else{
            //splice删除
            var idx= $scope.selectIds.indexOf(id);//ID在数组中的位置
            $scope.selectIds.splice( idx ,1);
        }
    }

})

2.抽取Controller剩余放进brandController.js代码中

//这里我们不仅将$scope注入,还要注入分离后的brandService,还要注入父Controller,baseController
app.controller("brandController",function ($scope,$controller,brandService) {//构建前端控制器
    //将父Controller注入,这是一种伪继承,本质上是通过共享$scope实现的
    $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.search=function(page,rows){
        //这里我们通过$scope.searchEntity把从前端获取的searchEntity传递给service层
        brandService.search(page,rows,$scope.searchEntity).success( function (response) {
            $scope.list=response.rows;
            $scope.paginationConf.totalItems=response.total;//定义总记录数
        })
    }

    //新增品牌
    $scope.save=function () {
        var object=null;
        if($scope.entity.id!=null){
            object=brandService.update($scope.entity);
        }else{
            object=brandService.add($scope.entity);
        }
        object.success(function (response) {
            if(response.success){
                $scope.reloadList();
            }else{
                alert(response.message);
            }
        })
    }

    $scope.findOne=function(id){
        brandService.findOne(id).success(function (response) {
            $scope.entity=response;
        })
    }

    //删除
    $scope.dele=function(){
        if($scope.selectIds.length==0){
            alert("请选择！");
            return;
        }
        brandService.dele($scope.selectIds).success(function (response) {
            if(response.success){
                $scope.reloadList();//刷新列表
                $scope.selectIds=[];
            }else{
                alert(response.message );
            }
        })
    }
})