angular.js代码分离

其他 2019-03-01 10:21:08 阅读次数: 0

目录

目录结构

代码分层

继承

目录结构

代码分层

原始html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>品牌管理</title>
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="../css/style.css">
    <script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script src="../plugins/bootstrap/js/bootstrap.min.js"></script>
    <script src="../plugins/angularjs/angular.min.js"></script>
    <!--分页组件  开始-->
    <link rel="stylesheet" href="../plugins/angularjs/pagination.css">
    <script src="../plugins/angularjs/pagination.js"></script>
    <!--分页插件 结束-->
    <script>
        //指定
        var app = angular.module('pinyougou', ['pagination']);
        //品牌服务
        app.service("brandService",function ($http) {
            this.findAll=function () {
                return  $http.get("../brand/findAllBrand");
            }

            this.add=function (brand) {
                return $http.post("/brand/addBrand",brand)
            }
            this.update=function (brand) {
                return $http.post("/brand/updateBrand",brand)
            }
            this.delete=function (ids) {
                return  $http.get("/brand/deleteBrandByIds?ids="+ids);
            }
            this.search=function (currentPage,itemsPerPage,searchEntity) {
                return $http.get("/brand/findPage?total=" + currentPage + "&totalPage=" + itemsPerPage,searchEntity)
            }
        })
        app.controller("brandController", function ($scope, $http,brandService) {
            $scope.findAll = function () {
                //查询品牌列表
                brandService.findAll.success(function (res) {
                    $scope.list = res.data;
                })


            }

//分页控件配置 //当前页码  //总记录数 //每页记录数 //每页显示条数选项 //当页码重新变厚自动触发的方法
            $scope.paginationConf = {
                currentPage: 1,
                totalItems: 10,
                itemsPerPage: 10,
                pagesLength: 15,
                perPageOptions: [10, 20, 30, 40, 50],
                onChange: function () {
                    //调用刷新当前页码方法
                    $scope.reload();
                }
            }
            //商品页修改商品回先
            $scope.BrandBack = function(id,name,firstChar){
                $scope.brand={"id":id,"name":name,"firstChar":firstChar}
            }

            //品牌删除多选
            //定义要删除的id集合
            $scope.deleteBrandIds=[];
            //往删除的id集合中添加选中的品牌
            $scope.checkboxDeleteid =function($event,id){
                //判断是否为被选中
                if($event.target.checked){
                    //被选中--将id添加至集合
                    $scope.deleteBrandIds.push(id)
                }else{
                    //取消选中
                    //获取这个id在集合中下标位置
                    var index =$scope.deleteBrandIds.indexOf(id);
                    //移除
                    $scope.deleteBrandIds.splice(index,1);
                }
            }

            //删除品牌方法
            $scope.deleteBrandByids=function(){
                brandService.delete($scope.deleteBrandIds).success(
                    function (res) {
                        if(res.code == "200"){
                            //刷新页面
                            $scope.reload();
                            alert(res.message)
                        }else{
                            alert(res.message)
                        }
                    }
                )

            }
            //刷新列表方法
            $scope.reload = function () {
                $scope.searchPage($scope.paginationConf.currentPage, $scope.paginationConf.itemsPerPage)
            }
            //新增方法
            $scope.saveBrand=function(){
                var object =null;
                //如果是修改id不为null
                if($scope.brand.id!=null){
                    object=brandService.update($scope.brand)
                }else{
                    object=brandService.add($scope.brand)
                }
                object.success(
                    function (res) {
                        if(res.code == "200"){
                            //刷新页面
                            $scope.reload();
                            alert(res.message)
                        }else{
                            alert(res.message)
                        }
                    }
                )
            }
            $scope.searchEntity={}
            //条件查询
            $scope.searchPage=function(currentPage,itemsPerPage){
                brandService.search(currentPage,itemsPerPage,$scope.searchEntity).success(
                    function (res) {
                        if (res.code == "200") {
                            $scope.list = res.data; //显示当前页的数据
                            $scope.paginationConf.totalItems = res.total;//更新总记录数
                            console.log("查询分页品牌列表成功")
                        } else {
                            console.log("查询分页品牌列表失败")
                        }

                    }
                )
            }

            //查询分页品牌列表
            $scope.findPage = function (currentPage, itemsPerPage) {
                $http.get("/brand/findPage?total=" + currentPage + "&totalPage=" + itemsPerPage).success(
                    function (res) {
                        if (res.code == "200") {
                            $scope.list = res.data; //显示当前页的数据
                            $scope.paginationConf.totalItems = res.total;//更新总记录数
                            console.log("查询分页品牌列表成功")
                        } else {
                            console.log("查询分页品牌列表失败")
                        }

                    }
                )
            }

        })


    </script>

</head>
<body class="hold-transition skin-red sidebar-mini" ng-app="pinyougou" ng-controller="brandController">
<!-- .box-body -->
<div class="box-header with-border">
    <h3 class="box-title">品牌管理</h3>
</div>

<div class="box-body">

    <!-- 数据表格 -->
    <div class="table-box">

        <!--工具栏-->
        <div class="pull-left">
            <div class="form-group form-inline">
                <div class="btn-group">
                    <button type="button" class="btn btn-default" title="新建" data-toggle="modal"
                            data-target="#editModal" ng-click="brand={}"><i class="fa fa-file-o" ></i> 新建
                    </button>
                    <button type="button" class="btn btn-default" title="删除" ng-click="deleteBrandByids()"><i class="fa fa-trash-o"></i> 删除</button>
                    <button type="button" class="btn btn-default" title="刷新" onclick="window.location.reload();"><i
                            class="fa fa-refresh"></i> 刷新
                    </button>
                </div>
            </div>
        </div>
        <div class="box-tools pull-right">
            <div class="has-feedback">
            品牌名称:<input ng-model="searchEntity.name">
            品牌首字母:<input ng-model="searchEntity.firstChar">
            <button type="button" class="btn btn-default" title="查询" ng-click="reload()">查询
            </button>
            </div>
        </div>
        <!--工具栏/-->

        <!--数据列表-->
        <table id="dataList" class="table table-bordered table-striped table-hover dataTable">
            <thead>
            <tr>
                <th class="" style="padding-right:0px">
                    <input id="selall" type="checkbox" class="icheckbox_square-blue">
                </th>
                <th class="sorting_asc">品牌ID</th>
                <th class="sorting">品牌名称</th>
                <th class="sorting">品牌首字母</th>
                <th class="text-center">操作</th>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="b in list">
                <td><input type="checkbox"  ng-click="checkboxDeleteid($event,b.id)"></td>
                <td >{{b.id}}</td>
                <td >{{b.name}}</td>
                <td >{{b.firstChar}}</td>
                <td class="text-center">
                    <button type="button" class="btn bg-olive btn-xs" data-toggle="modal" data-target="#editModal" ng-click="BrandBack(b.id,b.name,b.firstChar)">修改
                    </button>
                </td>
            </tr>


            </tbody>

        </table>
        <!--数据列表/-->
        <tm-pagination conf="paginationConf"></tm-pagination>
    </div>
    <!-- 数据表格 /-->


</div>
<!-- /.box-body -->

<!-- 编辑窗口 -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3 id="myModalLabel">品牌编辑</h3>
            </div>
            <div class="modal-body">
                <table class="table table-bordered table-striped" width="800px">
                    <tr>
                        <td>品牌名称</td>
                        <td><input class="form-control" placeholder="品牌名称" ng-model="brand.name"></td>
                    </tr>
                    <tr>
                        <td>首字母</td>
                        <td><input class="form-control" placeholder="首字母"  ng-model="brand.firstChar"></td>
                    </tr>
                </table>
            <div class="modal-footer">
                <button class="btn btn-success" data-dismiss="modal" aria-hidden="true" ng-click="saveBrand()">保存</button>
                <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
            </div>
        </div>
    </div>
</div>

</body>
</html>

base.js

var app = angular.module('xxxx', []); //指定页面 去掉分页'pagination'

base_pageNation.js

var app = angular.module('xxxxx', ['pagination']); //指定页面 带分页

brandService.js

//品牌服务
app.service("brandService",function ($http) {
    this.findAll=function () {
        return  $http.get("../brand/findAllBrand");
    }

    this.add=function (brand) {
        return $http.post("/brand/addBrand",brand)
    }
    this.update=function (brand) {
        return $http.post("/brand/updateBrand",brand)
    }
    this.delete=function (ids) {
        return  $http.get("/brand/deleteBrandByIds?ids="+ids);
    }
    this.search=function (currentPage,itemsPerPage,searchEntity) {
        return $http.get("/brand/findPage?total=" + currentPage + "&totalPage=" + itemsPerPage,searchEntity)
    }
})

brandController.js

app.controller("brandController", function ($scope, $http,brandService) {
    $scope.findAll = function () {
        //查询品牌列表
        brandService.findAll.success(function (res) {
            $scope.list = res.data;
        })


    }

//分页控件配置 //当前页码  //总记录数 //每页记录数 //每页显示条数选项 //当页码重新变厚自动触发的方法
    $scope.paginationConf = {
        currentPage: 1,
        totalItems: 10,
        itemsPerPage: 10,
        pagesLength: 15,
        perPageOptions: [10, 20, 30, 40, 50],
        onChange: function () {
            //调用刷新当前页码方法
            $scope.reload();
        }
    }
    //商品页修改商品回先
    $scope.BrandBack = function(id,name,firstChar){
        $scope.brand={"id":id,"name":name,"firstChar":firstChar}
    }

    //品牌删除多选
    //定义要删除的id集合
    $scope.deleteBrandIds=[];
    //往删除的id集合中添加选中的品牌
    $scope.checkboxDeleteid =function($event,id){
        //判断是否为被选中
        if($event.target.checked){
            //被选中--将id添加至集合
            $scope.deleteBrandIds.push(id)
        }else{
            //取消选中
            //获取这个id在集合中下标位置
            var index =$scope.deleteBrandIds.indexOf(id);
            //移除
            $scope.deleteBrandIds.splice(index,1);
        }
    }

    //删除品牌方法
    $scope.deleteBrandByids=function(){
        brandService.delete($scope.deleteBrandIds).success(
            function (res) {
                if(res.code == "200"){
                    //刷新页面
                    $scope.reload();
                    alert(res.message)
                }else{
                    alert(res.message)
                }
            }
        )

    }
    //刷新列表方法
    $scope.reload = function () {
        $scope.searchPage($scope.paginationConf.currentPage, $scope.paginationConf.itemsPerPage)
    }
    //新增方法
    $scope.saveBrand=function(){
        var object =null;
        //如果是修改id不为null
        if($scope.brand.id!=null){
            object=brandService.update($scope.brand)
        }else{
            object=brandService.add($scope.brand)
        }
        object.success(
            function (res) {
                if(res.code == "200"){
                    //刷新页面
                    $scope.reload();
                    alert(res.message)
                }else{
                    alert(res.message)
                }
            }
        )
    }
    $scope.searchEntity={}
    //条件查询
    $scope.searchPage=function(currentPage,itemsPerPage){
        brandService.search(currentPage,itemsPerPage,$scope.searchEntity).success(
            function (res) {
                if (res.code == "200") {
                    $scope.list = res.data; //显示当前页的数据
                    $scope.paginationConf.totalItems = res.total;//更新总记录数
                    console.log("查询分页品牌列表成功")
                } else {
                    console.log("查询分页品牌列表失败")
                }

            }
        )
    }

    //查询分页品牌列表
    $scope.findPage = function (currentPage, itemsPerPage) {
        $http.get("/brand/findPage?total=" + currentPage + "&totalPage=" + itemsPerPage).success(
            function (res) {
                if (res.code == "200") {
                    $scope.list = res.data; //显示当前页的数据
                    $scope.paginationConf.totalItems = res.total;//更新总记录数
                    console.log("查询分页品牌列表成功")
                } else {
                    console.log("查询分页品牌列表失败")
                }

            }
        )
    }

})

分层后的html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>品牌管理</title>
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="../plugins/adminLTE/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="../css/style.css">
    <script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script src="../plugins/bootstrap/js/bootstrap.min.js"></script>
    <script src="../plugins/angularjs/angular.min.js"></script>
    <!--分页组件  开始-->
    <link rel="stylesheet" href="../plugins/angularjs/pagination.css">
    <script src="../plugins/angularjs/pagination.js"></script>
    <!--分页插件 结束-->
    <!--引入-->
    <script src="../js/base_pageNation.js"></script>
    <script src="../js/service/brandService.js"></script>
    <script src="../js/controller/brandController.js"></script>
</head>
<body class="hold-transition skin-red sidebar-mini" ng-app="pinyougou" ng-controller="brandController">
<!-- .box-body -->
<div class="box-header with-border">
    <h3 class="box-title">品牌管理</h3>
</div>

<div class="box-body">

    <!-- 数据表格 -->
    <div class="table-box">

        <!--工具栏-->
        <div class="pull-left">
            <div class="form-group form-inline">
                <div class="btn-group">
                    <button type="button" class="btn btn-default" title="新建" data-toggle="modal"
                            data-target="#editModal" ng-click="brand={}"><i class="fa fa-file-o" ></i> 新建
                    </button>
                    <button type="button" class="btn btn-default" title="删除" ng-click="deleteBrandByids()"><i class="fa fa-trash-o"></i> 删除</button>
                    <button type="button" class="btn btn-default" title="刷新" onclick="window.location.reload();"><i
                            class="fa fa-refresh"></i> 刷新
                    </button>
                </div>
            </div>
        </div>
        <div class="box-tools pull-right">
            <div class="has-feedback">
            品牌名称:<input ng-model="searchEntity.name">
            品牌首字母:<input ng-model="searchEntity.firstChar">
            <button type="button" class="btn btn-default" title="查询" ng-click="reload()">查询
            </button>
            </div>
        </div>
        <!--工具栏/-->

        <!--数据列表-->
        <table id="dataList" class="table table-bordered table-striped table-hover dataTable">
            <thead>
            <tr>
                <th class="" style="padding-right:0px">
                    <input id="selall" type="checkbox" class="icheckbox_square-blue">
                </th>
                <th class="sorting_asc">品牌ID</th>
                <th class="sorting">品牌名称</th>
                <th class="sorting">品牌首字母</th>
                <th class="text-center">操作</th>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="b in list">
                <td><input type="checkbox"  ng-click="checkboxDeleteid($event,b.id)"></td>
                <td >{{b.id}}</td>
                <td >{{b.name}}</td>
                <td >{{b.firstChar}}</td>
                <td class="text-center">
                    <button type="button" class="btn bg-olive btn-xs" data-toggle="modal" data-target="#editModal" ng-click="BrandBack(b.id,b.name,b.firstChar)">修改
                    </button>
                </td>
            </tr>


            </tbody>

        </table>
        <!--数据列表/-->
        <tm-pagination conf="paginationConf"></tm-pagination>
    </div>
    <!-- 数据表格 /-->


</div>
<!-- /.box-body -->

<!-- 编辑窗口 -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3 id="myModalLabel">品牌编辑</h3>
            </div>
            <div class="modal-body">
                <table class="table table-bordered table-striped" width="800px">
                    <tr>
                        <td>品牌名称</td>
                        <td><input class="form-control" placeholder="品牌名称" ng-model="brand.name"></td>
                    </tr>
                    <tr>
                        <td>首字母</td>
                        <td><input class="form-control" placeholder="首字母"  ng-model="brand.firstChar"></td>
                    </tr>
                </table>
            <div class="modal-footer">
                <button class="btn btn-success" data-dismiss="modal" aria-hidden="true" ng-click="saveBrand()">保存</button>
                <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
            </div>
        </div>
    </div>
</div>

</body>
</html>

继承

创建通用的控制器模块在需要的地方继承并且在页面上也要做引用

添加baseController 通用js

将BrandController中通用的方法抽取出来 分页,复选框的勾选

baseController.js

app.controller("baseController",function ($scope) {
    //刷新列表方法
    $scope.reload = function () {
        $scope.searchPage($scope.paginationConf.currentPage, $scope.paginationConf.itemsPerPage)
    }
//分页控件配置 //当前页码  //总记录数 //每页记录数 //每页显示条数选项 //当页码重新变厚自动触发的方法
    $scope.paginationConf = {
        currentPage: 1,
        totalItems: 10,
        itemsPerPage: 10,
        pagesLength: 15,
        perPageOptions: [10, 20, 30, 40, 50],
        onChange: function () {
            //调用刷新当前页码方法
            $scope.reload();
        }
    }

    //品牌删除多选
    //定义要删除的id集合
    $scope.deleteBrandIds=[];
    //往删除的id集合中添加选中的品牌
    $scope.checkboxDeleteid =function($event,id){
        //判断是否为被选中
        if($event.target.checked){
            //被选中--将id添加至集合
            $scope.deleteBrandIds.push(id)
        }else{
            //取消选中
            //获取这个id在集合中下标位置
            var index =$scope.deleteBrandIds.indexOf(id);
            //移除
            $scope.deleteBrandIds.splice(index,1);
        }
    }
})

brandController.js  ,添加Controller继承内置服务

app.controller("brandController", function ($scope, $http,$controller,brandService) {
    //继承
    $controller("baseController",{$scope:$scope})

    $scope.findAll = function () {
        //查询品牌列表
        brandService.findAll.success(function (res) {
            $scope.list = res.data;
        })


    }
    //商品页修改商品回先
    $scope.BrandBack = function(id,name,firstChar){
        $scope.brand={"id":id,"name":name,"firstChar":firstChar}
    }
    //删除品牌方法
    $scope.deleteBrandByids=function(){
        brandService.delete($scope.deleteBrandIds).success(
            function (res) {
                if(res.code == "200"){
                    //刷新页面
                    $scope.reload();
                    alert(res.message)
                }else{
                    alert(res.message)
                }
            }
        )

    }

    //新增方法
    $scope.saveBrand=function(){
        var object =null;
        //如果是修改id不为null
        if($scope.brand.id!=null){
            object=brandService.update($scope.brand)
        }else{
            object=brandService.add($scope.brand)
        }
        object.success(
            function (res) {
                if(res.code == "200"){
                    //刷新页面
                    $scope.reload();
                    alert(res.message)
                }else{
                    alert(res.message)
                }
            }
        )
    }
    $scope.searchEntity={}
    //条件查询
    $scope.searchPage=function(currentPage,itemsPerPage){
        brandService.search(currentPage,itemsPerPage,$scope.searchEntity).success(
            function (res) {
                if (res.code == "200") {
                    $scope.list = res.data; //显示当前页的数据
                    $scope.paginationConf.totalItems = res.total;//更新总记录数
                    console.log("查询分页品牌列表成功")
                } else {
                    console.log("查询分页品牌列表失败")
                }

            }
        )
    }

    //查询分页品牌列表
    $scope.findPage = function (currentPage, itemsPerPage) {
        $http.get("/brand/findPage?total=" + currentPage + "&totalPage=" + itemsPerPage).success(
            function (res) {
                if (res.code == "200") {
                    $scope.list = res.data; //显示当前页的数据
                    $scope.paginationConf.totalItems = res.total;//更新总记录数
                    console.log("查询分页品牌列表成功")
                } else {
                    console.log("查询分页品牌列表失败")
                }

            }
        )
    }

})

页面添加baseController.js引用

猜你喜欢

转载自blog.csdn.net/adminBfl/article/details/87191336
今日推荐
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
开源日报 | 中学生开源前端动画引擎；全球首个Llama3 8B中文版开源模型；联想电脑恐出局；Linus讽刺AI炒作
“百模大战”必有一战 | 2024中国“百模大战”竞争格局分析
周排行
Family Tree 题解
BZOJ 1093 最大半连通子图 SCC + DP
幂等处理
Spring----学习（2）----XML 配置Bean 自动装配
SQL Server 远程更新目标表数据
HIbernate3.6 环境搭建
特殊符号正则表达式
【Linux】第一章 进程的理解
843. n-皇后问题（dfs+输出各种情况）
空间数据库2
每日归档
更多
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)
2024-04-17(5)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022