码迷,mamicode.com
首页 > 其他好文 > 详细

angular前段分层开发

时间:2019-11-14 00:00:44      阅读:74      评论:0      收藏:0      [点我收藏+]

标签:分层   数组   创建   mamicode   信息   dex   asc   收购   update   

angular介绍:

AngularJS [1]  诞生于2009年,由Misko Hevery 等人创建,后为Google所收购。是一款优秀的前端JS框架,已经被用于Google的多款产品当中。AngularJS有着诸多特性,最为核心的是:MVC(Model–view–controller)、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。
AngularJS 是一个 JavaScript框架。它是一个以 JavaScript 编写的库。它可通过 <script> 标签添加到HTML 页面。 [2] 
AngularJS 通过 指令 扩展了 HTML,且通过 表达式 绑定数据到 HTML。
AngularJS 是以一个 JavaScript 文件形式发布的,可通过 script 标签添加到网页中。
 
分层一般分为:baseController、xxxService、xxxController
在前段页面中,分别引入,一定要按顺序。
技术图片

 

baseController:

//基本控制层
app.controller(‘baseController‘ ,function($scope){
$scope.reloadList=function(){
//切换页码
//$scope.findPage($scope.paginationConf.currentPage,$scope.paginationConf.itemsPerPage)
$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.findPage = function(page,rows){
$http.get(‘http://localhost:9101/brand/findPage.do?page=‘+page+‘&rows=‘+rows).success(
function (response) {
$scope.list = response.rows;
$scope.paginationConf.totalItems = response.total;
}
)
}*/
//添加数据
/*$scope.add = function(){
$http.post(‘http://localhost:9101/brand/add.do‘,$scope.entity).success(
function (response) {
if (response.success == true){
$scope.reloadList();
} else{
alert(response.message);
$scope.reloadList();
}
}
)
}*/
//定义一个数组
$scope.selectedIds=[];
$scope.updateSelection = function($event,id){
if ($event.target.checked){
$scope.selectedIds.push(id);
}else{
var index = $scope.selectedIds.indexOf(id);
$scope.selectedIds.splice(index,1);
}
}
});

 xxxService:

 

app.service(‘brandService‘,function ($http) {
//分页查询
this.search = function (page,rows,searchEntity) {
return $http.post(‘http://localhost:9101/brand/search.do?page=‘+page+‘&rows=‘+rows,searchEntity);
}
//删除选中数据
this.dele = function (selectedIds) {
return $http.get(‘http://localhost:9101/brand/delete.do?ids=‘+selectedIds);
}
//查询某一条数据
this.findOne = function (id) {
return $http.get(‘http://localhost:9101/brand/findOne.do?id=‘+id);
}
//保存
this.save = function (methodName,entity) {
return $http.put(‘http://localhost:9101/brand/‘+methodName+‘.do‘,entity);
}
})

 

xxxController:

 

//定义控制层,需要注入service代码
app.controller(‘brandController‘,function ($scope,$controller,brandService) {
$controller(‘baseController‘,{$scope:$scope});//继承
//删除所有选中信息
$scope.dele = function(){
brandService.dele($scope.selectedIds).success(
function (response) {
if (response.success == true){
$scope.reloadList();
} else{
alert(response.message);
$scope.reloadList();
}
}
)
}
//修改前查询要修改的数据
$scope.findOne = function(id){
brandService.findOne(id).success(
function (response) {
$scope.entity = response;
}
)
}
//保存修改后的数据
$scope.save = function(){
var id = $scope.entity.id;
var methodName = "add";
if (id != null){
methodName = "update";
}

brandService.save(methodName,$scope.entity).success(
function (response) {
if (response.success == true){
$scope.reloadList();
} else{
alert(response.message);
$scope.reloadList();
}
}
)
}
//模糊查询
$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;
}
)
}

})

 

angular前段分层开发

标签:分层   数组   创建   mamicode   信息   dex   asc   收购   update   

原文地址:https://www.cnblogs.com/wycBolg/p/11854051.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有 京ICP备13008772号-2
迷上了代码!