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>
183
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
