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. 項目結構（分層）