AngularJs分层结构小demo
后端mvc分层,前端也要分层才对嘛。分层的好处不言而喻。简直太清晰,容易维护。反正清爽的一逼。不信你看。
思路:分为controller层和service层。controller层再提取一个公共的层。比如放一些分页逻辑啦,格式化这类的方法。然后还有个module层。好的 齐活。
看代码:
base_pagination.js(这个是最大的module层,后面引入了个分页的module,分页必须得嘛)
var app=angular.module('pinyougou',['pagination']);
baseController.js (提取的公共controller层,分页,格式化转换,复选框方法,重新加载数据方法等等)
//品牌控制层
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的控制器了,没啥好说的)
//控制层
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.js
//服务层
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 (注意引入的顺序)
<!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,收工
AngularJs分层结构小demo的更多相关文章
- jQuery的矿建结构小demo举例
(function (global) { var document = global.document,//变成局部变量提高搜索的性能 init;// 核心函数 function itcast(sel ...
- 新手 gulp+ seajs 小demo
首先,不说废话,它的介绍和作者就不在多说了,网上一百度一大堆: 我在这里只是来写写我这2天抽空对seajs的了解并爬过的坑,和实现的一个小demo(纯属为了实现,高手请绕道); 一.环境工具及安装 1 ...
- Nancy之基于Nancy.Owin的小Demo
前面做了基于Nancy.Hosting.Aspnet和Nancy.Hosting.Self的小Demo 今天我们来做个基于Nancy.Owin的小Demo 开始之前我们来说说什么是Owin和Katan ...
- python 词云小demo
词云小demo jiebawordcloud 一 什么是词云? 由词汇组成类似云的彩色图形.“词云”就是对网络文本中出现频率较高的“关键词”予以视觉上的突出,形成“关键词云层”或“关键词渲染”,从而过 ...
- SpringMVC小demo解析
第一次实际接触SpringMVC,之前在教程网站上看得是概念性的. SpringMVC是属于Java框架SSM中的一环 在做了一个小demo后发现原来编程如此简单. 首先建立动态网页项目(Dynami ...
- Android -BLE蓝牙小DEMO
代码地址如下:http://www.demodashi.com/demo/13890.html 原文地址: https://blog.csdn.net/vnanyesheshou/article/de ...
- Vue.js之组件嵌套小demo
Vue.js之组件嵌套的小demo项目 第一步:初始化一个wabpack项目,这里不在复述.第二步:在components文件夹下新建Header.vue Footer.vue和Users.vue三个 ...
- selenium 3+python3.6+firefox的windows详细环境搭建以及小demo
最近也是学习了下selenium和python,就记录了下在自己工作机上环境的搭建过程以及小demo 1,安装python3.6.1 我是去官网直接下载当前最新版的python3.6.1 官网网址为h ...
- 微信小程序小Demo
微信小程序小Demo 调用API,轮播图,排行榜,底部BabTar的使用... board // board/board.js Page({ /** * 页面的初始数据 */ // 可以是网络路径图片 ...
随机推荐
- VS2010带不出System.Data.OracleClient这个引用的解决方案
在使用VS2010的时候有时会带不出System.Data.OracleClient这个引用,可以使用以下解决方法: 右击项目的属性,在弹出窗口中有一个“目标框架”下拉框选项,默认会是.NET FRA ...
- EOS开发基础之二:使用cleos命令行客户端操作EOS(钱包wallet基础操作)
不知道下边这一段英文你们是不是能看懂,如果看不懂那就算了,我就是转过来随便看看的. 总之你记住nodeos.cleos和keosd这三个工程十分重要就行了,回头咱们的研究都从这三个工程杀进去. EOS ...
- 一篇带你读懂TCP之“滑动窗口”协议
前言 你现在的努力,是为了以后有更多的选择. 在上一篇文章通过"表白"方式,让我们快速了解网络七层协议了解了网络七层协议. 接下来我们要把重心放在网络传输的可靠性上面.一起来看TC ...
- Linux内核分析(第二周)
操作系统是如何工作的? 一.总结:三大法宝 1.存储程序计算机 + 函数调用堆栈 + 中断机制 2.堆栈:C语言程序运行时候必须的一个记录调用路径和参数的空间(函数调用框架/提供局部变量/传递参数/保 ...
- 第二阶段冲刺——three
个人任务: 王金萱:优化统计个人博客结果页面的显示. 司宇航:绘制logo. 季方:合并程序(优化统计个人博客界面). 马佳慧:选择功能界面的选择框排版设计. 站立会议: 任务看板和燃尽图:
- Docker(二十二)-Docker Swarm常用命令
#查看集群节点 docker node ls #创建nginx服务 #docker pull hub.test.com:5000/almi/nginx:0.1 #下载私有仓库镜像 docker ser ...
- FuelPHP 系列(四) ------ Validate 验证
一.可用规则: 1.required 不能为 null, false or empty string.: 2.required_with 关联某个字段,关联字段有值则该字段必须有值: 3.match_ ...
- Python进阶-字符串格式化
目录 前言 %格式化 str.format() f-Strings 特殊符号处理 前言 在 Python 3.6 之前,字符串格式化方法主要有两种: %格式化 str.format() 在Python ...
- 深入解读Quartz的原理
Quartz是一个大名鼎鼎的Java版开源定时调度器,功能强悍,使用方便. 一.核心概念 Quartz的原理不是很复杂,只要搞明白几个概念,然后知道如何去启动和关闭一个调度程序即可. 1 ...
- nodejs nodemailer 使用
index.js const nodemailer=require("nodemailer") let sendEmail=function () { var transporte ...