AngularJs分层结构小demo
后端mvc分层，前端也要分层才对嘛。分层的好处不言而喻。简直太清晰，容易维护。反正清爽的一逼。不信你看。javascript
思路：分为controller层和service层。controller层再提取一个公共的层。好比放一些分页逻辑啦，格式化这类的方法。而后还有个module层。好的 齐活。css
看代码：html
base_pagination.js（这个是最大的module层，后面引入了个分页的module，分页必须得嘛）前端
var app=angular.module('pinyougou',['pagination']);
baseController.js （提取的公共controller层，分页，格式化转换，复选框方法，从新加载数据方法等等）java
//品牌控制层 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; } });
brandController.js（那这里就是一些调用service的控制器了，没啥好说的）jquery
//控制层 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;//更新总记录数 } ); } });
brandService.jsangularjs
//服务层 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+"&size="+rows, searchEntity); } //下拉列表数据 this.selectOptionList=function(){ return $http.get('../brand/selectOptionList.do'); } });
brand.html （注意引入的顺序）json
<!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>
<!-- 分页组件开始 -->
<script src="../plugins/angularjs/pagination.js"></script>
<link rel="stylesheet" href="../plugins/angularjs/pagination.css">
<!-- 分页组件结束 -->
<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>
</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="entity={}" ><i class="fa fa-file-o"></i> 新建</button>
<button type="button" class="btn btn-default" title="删除" ng-click="dele()"><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 class="btn btn-default" ng-click="reloadList()">查询</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="entity in list">
<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>
</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="entity.name"> </td>
</tr>
<tr>
<td>首字母</td>
<td><input class="form-control" placeholder="首字母" ng-model="entity.firstChar"> </td>
</tr>
</table>
</div>
<div class="modal-footer">
<button class="btn btn-success" data-dismiss="modal" aria-hidden="true" ng-click="save()">保存</button>
<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
</div>
</div>
</div>
</div>
</body>
</html>
ok，收工bootstrap
相关文章
- 1. AngularJS - 入门小Demo
- 2. OSI分层结构
- 3. AngularJS入门demo
- 4. angularJs分层服务开发
- 5. 爬虫的分层结构
- 6. 计算机分层结构
- 7. 网络分层结构
- 8. ConcurrentHashMap底层结构分析
- 9. 分层结构的好处
- 10. 项目结构（分层）
- 更多相关文章...
- • Rust 结构体 - RUST 教程
- • XML 树结构 - XML 教程
- • 算法总结-二分查找法
- • Git五分钟教程
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
欢迎关注本站公众号,获取更多信息
相关文章
- 1. AngularJS - 入门小Demo
- 2. OSI分层结构
- 3. AngularJS入门demo
- 4. angularJs分层服务开发
- 5. 爬虫的分层结构
- 6. 计算机分层结构
- 7. 网络分层结构
- 8. ConcurrentHashMap底层结构分析
- 9. 分层结构的好处
- 10. 项目结构（分层）