Angular Js在分佈式項目中的封裝過的用法
百度百科
AngularJS 誕生於2009年，由Misko Hevery 等人創建，後爲Google所收購。是一款優秀的前端JS框架，已經被用於Google的多款產品當中。AngularJS有着諸多特性，最爲核心的是：MVC（Model–view–controller）、模塊化、自動化雙向數據綁定、語義化標籤、依賴注入等等。AngularJS 是一個 JavaScript框架。它是一個以 JavaScript 編寫的庫。它可通過 js來動態實現數據的刷新功能
封裝Angular Js
//控制層
app.controller('specificationController' ,function($scope,$controller ,specificationService){
$controller('baseController',{$scope:$scope});//繼承
//讀取列表數據綁定到表單中
$scope.findAll=function(){
specificationService.findAll().success(
function(response){
$scope.list=response;
}
);
}
//分頁
$scope.findPage=function(page,rows){
specificationService.findPage(page,rows).success(
function(response){
$scope.list=response.rows;
$scope.paginationConf.totalItems=response.total;//更新總記錄數
}
);
}
//查詢實體
$scope.findOne=function(id){
specificationService.findOne(id).success(
function(response){
$scope.entity= response;
}
);
}
//保存
$scope.save=function(){
var serviceObject;//服務層對象
if($scope.entity.specification.id!=null){//如果有ID
serviceObject=specificationService.update( $scope.entity ); //修改
}else{
serviceObject=specificationService.add( $scope.entity );//增加
}
serviceObject.success(
function(response){
if(response.success){
//重新查詢
$scope.reloadList();//重新加載
}else{
alert(response.message);
}
}
);
}
//批量刪除
$scope.dele=function(){
//獲取選中的複選框
specificationService.dele( $scope.selectIds ).success(
function(response){
if(response.success){
$scope.reloadList();//刷新列表
$scope.selectIds=[];
}
}
);
}
$scope.searchEntity={};//定義搜索對象
//搜索
$scope.search=function(page,rows){
specificationService.search(page,rows,$scope.searchEntity).success(
function(response){
$scope.list=response.rows;
$scope.paginationConf.totalItems=response.total;//更新總記錄數
}
);
}
//定義entity-->前端向後端傳遞的json對象
$scope.entity={specificationOptionList:[]};
//新增規格選項行
$scope.addTableRow=function () {
$scope.entity.specificationOptionList.push({});
}
//刪除規格選項行
$scope.deleteTableRow=function (index) {
$scope.entity.specificationOptionList.splice(index,1);
}
});
//服務層
app.service('specificationService',function($http){
//讀取列表數據綁定到表單中
this.findAll=function(){
return $http.get('../specification/findAll.do');
}
//分頁
this.findPage=function(page,rows){
return $http.get('../specification/findPage.do?page='+page+'&rows='+rows);
}
//查詢實體
this.findOne=function(id){
return $http.get('../specification/findOne.do?id='+id);
}
//增加
this.add=function(entity){
return $http.post('../specification/add.do',entity );
}
//修改
this.update=function(entity){
return $http.post('../specification/update.do',entity );
}
//刪除
this.dele=function(ids){
return $http.get('../specification/delete.do?ids='+ids);
}
//搜索
this.search=function(page,rows,searchEntity){
return $http.post('../specification/search.do?page='+page+"&rows="+rows, searchEntity);
}
});
<!DOCTYPE html>
<html>
<head>
<!-- 頁面meta -->
<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 type="text/javascript" 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>
<!--引入規格的service-->
<script type="text/javascript" src="../js/service/specificationService.js"></script>
<!--引入了父類的控制js-->
<script type="text/javascript" src="../js/controller/baseController.js"></script>
<!--引入規格的js的特點-->
<script type="text/javascript" src="../js/controller/specificationController.js"></script>
</head>
<body class="hold-transition skin-red sidebar-mini" ng-app="youlexuan" ng-controller="specificationController">
<!-- .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"><i class="fa fa-file-o"></i> 新建
</button>
<button type="button" class="btn btn-default" title="刪除"><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>
<button class="btn btn-default">查詢</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="text-center">操作</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="entity in list">
<td><input type="checkbox" ></td>
<td>{{entity.id}}</td>
<td>{{entity.specName}}</td>
<td class="text-center">
<button type="button" class="btn bg-olive btn-xs" data-toggle="modal" data-target="#editModal">修改</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="規格名稱"></td>
</tr>
</table>
<!-- 規格選項 -->
<div class="btn-group">
<button type="button" class="btn btn-default" title="新建"><i class="fa fa-file-o"></i> 新增規格選項
</button>
</div>
<table class="table table-bordered table-striped table-hover dataTable">
<thead>
<tr>
<th class="sorting">規格選項</th>
<th class="sorting">排序</th>
<th class="sorting">操作</th>
</thead>
<tbody>
<tr>
<td>
<input class="form-control" placeholder="規格選項">
</td>
<td>
<input class="form-control" placeholder="排序">
</td>
<td>
<button type="button" class="btn btn-default" title="刪除"><i class="fa fa-trash-o"></i> 刪除
</button>
</td>
</tr>
<tr>
<td>
<input class="form-control" placeholder="規格選項">
</td>
<td>
<input class="form-control" placeholder="排序">
</td>
<td>
<button type="button" class="btn btn-default" title="刪除"><i class="fa fa-trash-o"></i> 刪除
</button>
</td>
</tr>
<tr>
<td>
<input class="form-control" placeholder="規格選項">
</td>
<td>
<input class="form-control" placeholder="排序">
</td>
<td>
<button type="button" class="btn btn-default" title="刪除"><i class="fa fa-trash-o"></i> 刪除
</button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<button class="btn btn-success" data-dismiss="modal" aria-hidden="true">保存</button>
<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">關閉</button>
</div>
</div>
</div>
</div>
</body>
</html>