后端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的更多相关文章

  1. jQuery的矿建结构小demo举例

    (function (global) { var document = global.document,//变成局部变量提高搜索的性能 init;// 核心函数 function itcast(sel ...

  2. 新手 gulp+ seajs 小demo

    首先,不说废话,它的介绍和作者就不在多说了,网上一百度一大堆: 我在这里只是来写写我这2天抽空对seajs的了解并爬过的坑,和实现的一个小demo(纯属为了实现,高手请绕道); 一.环境工具及安装 1 ...

  3. Nancy之基于Nancy.Owin的小Demo

    前面做了基于Nancy.Hosting.Aspnet和Nancy.Hosting.Self的小Demo 今天我们来做个基于Nancy.Owin的小Demo 开始之前我们来说说什么是Owin和Katan ...

  4. python 词云小demo

    词云小demo jiebawordcloud 一 什么是词云? 由词汇组成类似云的彩色图形.“词云”就是对网络文本中出现频率较高的“关键词”予以视觉上的突出,形成“关键词云层”或“关键词渲染”,从而过 ...

  5. SpringMVC小demo解析

    第一次实际接触SpringMVC,之前在教程网站上看得是概念性的. SpringMVC是属于Java框架SSM中的一环 在做了一个小demo后发现原来编程如此简单. 首先建立动态网页项目(Dynami ...

  6. Android -BLE蓝牙小DEMO

    代码地址如下:http://www.demodashi.com/demo/13890.html 原文地址: https://blog.csdn.net/vnanyesheshou/article/de ...

  7. Vue.js之组件嵌套小demo

    Vue.js之组件嵌套的小demo项目 第一步:初始化一个wabpack项目,这里不在复述.第二步:在components文件夹下新建Header.vue Footer.vue和Users.vue三个 ...

  8. selenium 3+python3.6+firefox的windows详细环境搭建以及小demo

    最近也是学习了下selenium和python,就记录了下在自己工作机上环境的搭建过程以及小demo 1,安装python3.6.1 我是去官网直接下载当前最新版的python3.6.1 官网网址为h ...

  9. 微信小程序小Demo

    微信小程序小Demo 调用API,轮播图,排行榜,底部BabTar的使用... board // board/board.js Page({ /** * 页面的初始数据 */ // 可以是网络路径图片 ...

随机推荐

  1. LOJ.#6468. 魔法[差分+树状数组]

    题意 题目链接 分析 将询问差分并不断加入颜色. 每种颜色,一个位置 \(p\) 都只会走到与之左右相邻的两个位置之一,分类讨论 \(\rm |A-B|\) 的符号. 实现可以使用树状数组. 总时间复 ...

  2. Elasticsearch date 类型详解

    引言 一直对 elasticsearch 中的 date 类型认识比较模糊,而且在使用中又比较常见,这次决定多花些时间,彻底弄懂它,希望能对用到的同学提供帮助. 注意:本文测试使用是 elastics ...

  3. Scrapy爬虫入门实例

    网上关于Scracpy的讲述已经非常丰富了,而且还有大神翻译的官方文档,我就不重复造轮子了,自己写了一个小爬虫,遇到不少坑,也学到不少东西,在这里给大家分享一下,自己也做个备忘录. 主要功能就是爬取c ...

  4. mongodump备份小量分片集群数据

    1.使用mongodump备份小量分片集群数据 如果一个分片集群的数据集比较小,可以直接使用mongodump连接到mongos实例进行数据备份.默认情况下,mongodump到非primary的节点 ...

  5. 在Ubuntu虚拟机上安装DVWA

    学习资料来源:https://www.neddos.tech/?p=107 最后更新时间: 190122·17:41 1> 什么是DVWA(Damn Vulnerable Web Applica ...

  6. Vue.js 相关知识(脚手架)

    1. vue-cli 简介 Vue-cli 是 vue的设计者,为提升开发效率而提供的一个脚手架工具,可通过vue-cli快速构造项目结构 2. vue-cli 安装步骤 安装npm 或 cnpm n ...

  7. 微软职位内部推荐-Software Engineer

    微软近期Open的职位: Job Title: Software Engineer Work Location: Suzhou, China This is a once in a lifetime ...

  8. hive orc压缩数据异常java.lang.ClassCastException: org.apache.hadoop.io.Text cannot be cast to org.apache.hadoop.hive.ql.io.orc.OrcSerde$OrcSerdeRow

    hive表在创建时候指定存储格式 STORED AS ORC tblproperties ('orc.compress'='SNAPPY'); 当insert数据到表时抛出异常 Caused by: ...

  9. rethinking virtual network embedding..substrate support for path splitting and migration阅读笔记

    1.引言 网络虚拟化, 1.支持同一个底层网络有多种网络架构,每种架构定制一个应用或用户社区. 2.也可以让多个服务提供者在共同的物理基础设施上定制端到端的服务.如Voice over IP(VoIP ...

  10. Day Seven

    站立式会议 站立式会议内容总结 331 今天完成: 1.主页面 toolbar 菜单修改为点击弹出两个选项:新增计划和书籍 2.点击新增书籍跳转到文件管理器 home按钮为回退至上级目录,后退按钮为c ...