angular前段分层开发

angular介绍：

AngularJS [1]  诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVC（Model–view–controller）、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。

AngularJS 是一个 JavaScript框架。它是一个以 JavaScript 编写的库。它可通过 <script> 标签添加到HTML 页面。 [2] 

AngularJS 通过 指令 扩展了 HTML，且通过 表达式 绑定数据到 HTML。

AngularJS 是以一个 JavaScript 文件形式发布的，可通过 script 标签添加到网页中。

 

分层一般分为：baseController、xxxService、xxxController

在前段页面中，分别引入，一定要按顺序。

baseController：

//基本控制层
app.controller('baseController' ,function($scope){
    $scope.reloadList=function(){
        //切换页码
        //$scope.findPage($scope.paginationConf.currentPage,$scope.paginationConf.itemsPerPage)
        $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.findPage = function(page,rows){
        $http.get('http://localhost:9101/brand/findPage.do?page='+page+'&rows='+rows).success(
            function (response) {
                $scope.list = response.rows;
                $scope.paginationConf.totalItems = response.total;
            }
        )
    }*/
    //添加数据
    /*$scope.add = function(){
        $http.post('http://localhost:9101/brand/add.do',$scope.entity).success(
            function (response) {
                if (response.success == true){
                    $scope.reloadList();
                } else{
                    alert(response.message);
                    $scope.reloadList();
                }
            }
        )
    }*/
    //定义一个数组
    $scope.selectedIds=[];
    $scope.updateSelection = function($event,id){
        if ($event.target.checked){
            $scope.selectedIds.push(id);
        }else{
            var index = $scope.selectedIds.indexOf(id);
            $scope.selectedIds.splice(index,1);
        }
    }
});

 xxxService：

app.service('brandService',function ($http) {
    //分页查询
    this.search = function (page,rows,searchEntity) {
        return $http.post('http://localhost:9101/brand/search.do?page='+page+'&rows='+rows,searchEntity);
    }
    //删除选中数据
    this.dele = function (selectedIds) {
        return $http.get('http://localhost:9101/brand/delete.do?ids='+selectedIds);
    }
    //查询某一条数据
    this.findOne = function (id) {
        return $http.get('http://localhost:9101/brand/findOne.do?id='+id);
    }
    //保存
    this.save = function (methodName,entity) {
        return  $http.put('http://localhost:9101/brand/'+methodName+'.do',entity);
    }
})

xxxController：

//定义控制层，需要注入service代码
app.controller('brandController',function ($scope,$controller,brandService) {
    $controller('baseController',{$scope:$scope});//继承
    //删除所有选中信息
    $scope.dele = function(){
        brandService.dele($scope.selectedIds).success(
            function (response) {
                if (response.success == true){
                    $scope.reloadList();
                } else{
                    alert(response.message);
                    $scope.reloadList();
                }
            }
        )
    }
    //修改前查询要修改的数据
    $scope.findOne = function(id){
        brandService.findOne(id).success(
            function (response) {
                $scope.entity = response;
            }
        )
    }
    //保存修改后的数据
    $scope.save = function(){
        var id = $scope.entity.id;
        var methodName = "add";
        if (id != null){
            methodName = "update";
        }

        brandService.save(methodName,$scope.entity).success(
            function (response) {
                if (response.success == true){
                    $scope.reloadList();
                } else{
                    alert(response.message);
                    $scope.reloadList();
                }
            }
        )
    }
    //模糊查询
    $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;
            }
        )
    }

})