angularjs 1 开发简单案例(包含common.js,service.js,controller.js,page)

时间:2021-11-24 17:19:00
common.js
 var app = angular.module('app', ['ngFileUpload'])
.factory('SV_Common', function ($http) {
var data = {
WebService: '',
};
var vm = {
log: function (par, par1) {
return;
if (par1) {
console.log('********** common: ' + par + ' |', par1);
} else {
console.log('********** common: ' + par);
}
},
getData: function () {
return data;
},
getWebService: function () {
if (!data.WebService || data.WebService == '') {
throw { error: 'Request setWebService' };
}
return data.WebService;
},
setWebService: function (par) {
data.WebService = par;
vm.log('set websercie to [' + data.WebService + ']');
},
getRequest: function (func, pars) {
return {
method: 'POST',
url: vm.getWebService() + func,
headers: {
//'Content-Type': 'json',
'Content-Type': 'application/x-www-form-urlencoded',
},
data: pars,
dataType: 'json',
}
},
http: function (func, pars, cb) {
var re = { status: "0", context: "Internet Error" };
var req = vm.getRequest(func, pars);
vm.log('http ' + req.url, req.data);
$http(req).then(function (res) {
if (res.statusText == "OK") {
re = res.data;
}
if (cb) {
cb(re);
}
}, function (e) {
console.log('================ error:', e);
if (cb) {
cb(re);
}
});
},
http_post: function (func, pars, cb) {
var re = { status: "0", context: "Internet Error" };
var req = vm.getRequest(func, pars);
vm.log('post ' + req.url, req.data); $http.post(req.url, req.data).then(function (res) {
if (res.statusText == "OK") {
re.status = "1";
re.context = res.data;
}
cb(re);
}, function (e) {
console.log('================ error:', e);
if (cb) {
cb(re);
}
});
},
ajax_post: function (func, pars, cb) {
var re = { status: "0", context: "Internet Error" };
$.ajax({
type: "POST",
contentType: "application/json",
url: vm.getWebService() + func,
data: pars,
dataType: 'json',
success: function (result) {
console.log(result);
},
error: function (e) {
console.log(e);
}
});
},
FormatDate: function (strTime) {
var date = new Date(strTime);
if (date.getFullYear() > '2000') {
var day = date.getDate();
var month = date.getMonth();
if (day < 10 || day < 10) {
day = '0' + day;
}
if (month < 10 || month < 10) {
month = '0' + (month + 1);
}
date = day + '/' + month + "/" + date.getFullYear();
}
else {
date = null;
}
return date;
},
FormatDate1: function (strTime) {
var date = new Date(strTime);
console.log(date);
if (date.getFullYear() < '2000') {
date = '';
}
return date;
},
};
return vm;
})
.factory('SV_Popup', function ($timeout) {
var data = {};
var vm = {
getSide: function (side) {
var res = 'r0';
if (side) {
switch (side) {
case 'center':
res = 'c0';
break;
case 'centerLarger':
res = 'cl0';
break;
case 'right':
res = 'r0';
break;
case 'rightLarge':
res = 'rl0';
break;
}
}
return res;
},
SetPopup: function (source, side) {
if (!source) {
console.log('============== request source');
return;
}
//console.log(source);
source.popup = {
curCss: vm.getSide(side),
cssList: {
'c0': 'float_window_popup float_window_popup_init',
'c1': 'float_window_popup float_window_popup_show',
'c2': 'float_window_popup float_window_popup_hide',
'cl0': 'float_window_centerl float_window_centrel_init',
'cl1': 'float_window_centerl float_window_centrel_show',
'cl2': 'float_window_centerl float_window_centrel_hide', 'r0': 'float_window_right float_window_right_init',
'r1': 'float_window_right float_window_right_show',
'r2': 'float_window_right float_window_right_hide',
'rl0': 'float_window_right float_window_right_init',
'rl1': 'float_window_right float_window_rightl_show',
'rl2': 'float_window_right float_window_rightl_hide',
},
toggle: function (sc, par) {
if (sc && sc.popup) {
var t = '';
if (!par) {
switch (sc.popup.curCss) {
case '':
case 'c0':
t = 'c1';
break;
case 'c1':
t = 'c2';
break;
case 'c2':
t = 'c0';
break;
case 'cl0':
t = 'cl1';
break;
case 'cl1':
t = 'cl2';
break;
case 'cl2':
t = 'cl0';
break; case 'r0':
t = 'r1';
break;
case 'r1':
t = 'r2';
break;
case 'r2':
t = 'r0';
break;
case 'rl0':
t = 'rl1';
break;
case 'rl1':
t = 'rl2';
break;
case 'rl2':
t = 'rl0';
break;
}
} else {
t = par;
}
//console.log('============== ' + sc.popup.curCss + '->' + t);
if (t == 'c2' || t == 'cl2' || t == 'r2' || t == 'rl2') {
$timeout(function () {
sc.popup.toggle(sc);
}, 200);
}
sc.popup.curCss = t;
} else {
console.log('============== request source');
}
},
show: function (sc) {
if (sc && sc.popup) {
var tt = sc.popup.curCss;
if (tt && tt.length > 0) {
tt = tt.substring(0, tt.length - 1) + '1';
sc.popup.toggle(sc, tt);
} else {
sc.popup.toggle(sc);
}
} else {
console.log('============== request source');
}
},
hide: function (sc) {
if (sc && sc.popup) {
var tt = sc.popup.curCss;
if (tt && tt.length > 0) {
tt = tt.substring(0, tt.length - 1) + '2';
sc.popup.toggle(sc, tt);
} else {
sc.popup.toggle(sc);
}
} else {
console.log('============== request source');
}
}, }
}
}
return vm;
})
.directive('bxPager', function () {
return {
restrict: 'E',
replace: true,
scope: {
fData: '=',
},
template: function (el, at) {
var re = "";
re += '<div class="pager">\
Total <strong>{{fData.data.totalItems}}</strong> items, \
<input type="text" class="pager_input" ng-model="fData.data.pageSize" ng-change="f_pager.pageSize_Change();" />\
Page Size.\
<a class="pager_button" ng-click="f_pager.curPage_AddValue(-fData.data.totalPages);" style="margin-left: 30px;">|<</a>\
<a class="pager_button" ng-click="f_pager.curPage_AddValue(-1);" ng-disabled="fData.data.curPage<=1"><</a>\
<input type="text" class="pager_input" ng-model="fData.data.curPage" ng-change="f_pager.curPage_Change();" />/{{fData.data.totalPages}} Pages&nbsp;\
<a class="pager_button" ng-click="f_pager.curPage_AddValue(1);" ng-disabled="fData.data.curPage>=fData.data.totalPages">></a>\
<a class="pager_button" ng-click="f_pager.curPage_AddValue(fData.data.totalPages);">>|</a>\
</div>';
return re;
},
controller: function ($scope, $element, $attrs, $transclude) { $scope.f_pager = {
pageSize_Change: function () {
var i = parseInt($scope.fData.data.pageSize);
if (i && i >= 0) {
$scope.fData.data.pageSize = '' + i;
} else {
if ($scope.fData.data.pageSize == 'AL') {
$scope.fData.data.pageSize = '0';
} else {
$scope.fData.data.pageSize = 'ALL';
}
}
$scope.fData.data.curPage = 1;
if ($scope.fData.refresh && typeof ($scope.fData.refresh) == 'function') {
$scope.fData.refresh();
}
},
curPage_Change: function () {
var i = parseInt($scope.fData.data.curPage);
if (i && i > 0) {
if (i > $scope.fData.data.totalPages) {
$scope.fData.data.curPage = $scope.fData.data.totalPages;
} else {
$scope.fData.data.curPage = i;
}
} else {
$scope.fData.data.curPage = 0;
}
if ($scope.fData.refresh && typeof ($scope.fData.refresh) == 'function') {
$scope.fData.refresh();
}
},
curPage_AddValue: function (v) {
var i = parseInt(v);
//console.log($scope.fData.data.curPage,i);
if (i) {
var temp = $scope.fData.data.curPage + i;
if (temp < 1) {
temp = 1;
}
if (temp > $scope.fData.data.totalPages) {
temp = $scope.fData.data.totalPages;
}
if (temp != $scope.fData.data.curPage) {
$scope.fData.data.curPage = temp;
//SV_List.refresh(null, function (res) { });
//console.log($scope.fRefresh);
if ($scope.fData.refresh && typeof ($scope.fData.refresh) == 'function') {
$scope.fData.refresh();
}
}
}
}
}
}
}
});
service.js
 app.factory('SV_AssignExport', function ($http, SV_Common) {
var data = {
pager: {
totalItems: 0,
totalPages: 10,
curPage: 0,
pageSize: '100',
},
search: {},
client: {
title: '客户/Client',
list:[]
},
list: [],
refnos: {},
row: {},
show:false,
}
var vm = {
init: function () {
SV_Common.setWebService('JobService.asmx');
data.search = {
From: new Date(),
To: new Date(),
DateBy: 'Job',
Type: 'WGR',
JobNo: '',
BookingNo: '',
HblNo: '',
Vessel: '',
Product: '',
Client: '',
ClientName: '',
};
vm.refresh_client();
},
GetData: function () {
return data;
},
refresh: function (pars, cb) {
var pars = angular.copy(data.search);
pars.From = moment(pars.From).format('YYYYMMDD');
pars.To = moment(pars.To).add(1, 'days').format('YYYYMMDD');
pars.curPage = data.pager.curPage;
pars.pageSize = data.pager.pageSize;
console.log(pars);
var func = "/List_AssignCargo_GetData";
SV_Common.http(func, pars, function (res) {
if (res.status == true) {
data.pager.curPage = res.context.curPage;
data.pager.totalPages = res.context.totalPages;
data.pager.totalItems = res.context.totalItems;
var temp = res.context.list;
data.list = res.context.list;
}
if (cb) {
cb(res);
}
})
},
save: function (par, cb) {
var pars = angular.copy(par);
var func = "/Save_AssignExport_Data";
SV_Common.http(func, pars, function (res) {
if (res.status == true) {
vm.refresh();
}
if (cb) {
cb(res);
}
})
},
refresh_client: function (par, cb) {
var pars = {};
var func = "/MasterData_Client";
SV_Common.http(func, pars, function (res) {
if (res.status == '1') {
data.client.list = res.context;
}
if (cb) {
cb(res);
}
});
}, }
vm.init();
return vm; })
controller.js
 app.controller('Ctrl_AssignExport', function ($scope, SV_AssignExport, $timeout, SV_Popup, $http) {
$scope.log = '';
$scope.vm = SV_AssignExport.GetData();
$scope.newStock = {};
$scope.OrderId = '';
$scope.action = {
data: ['master', 'job','cargo'],
save: function () {
SV_AssignExport.save($scope.vm, function (res) {
//console.log('=============', $scope.vm);
if (res.status == true) {
parent.notice('Save Successful');
} else {
parent.notice('Save False', '', 'error');
}
});
},
createExport: function () {
var pol = document.getElementById('pol');
SV_AssignExport.creatExport($scope.vm, function (res) {
//console.log('=============', $scope.vm);
console.log(res);
if (res.status == true) {
parent.notice('Create Successful!', 'Job No is ' + res.context, '');
} else {
parent.notice('Save False', '', 'error');
}
});
},
search: function () {
SV_AssignExport.refresh(null, function (res) {
//console.log('=============', $scope.vm);
if (res.status == true) {
parent.notice('Refresh Successful');
} else {
parent.notice('Refresh False', '', 'error');
}
});
},
openTabJob: function (row) {
parent.navTab.openTab(row.JobNo, "/PagesContTrucking/Job/JobEdit.aspx?no=" + row.JobNo, { title: row.JobNo, fresh: false, external: true });
},
search_callback: function () { },
selectClient: function () {
$scope.action.is_show('master');
$scope.masterData.show($scope.vm.client, $scope.action.selectClient_callback);
},
selectClient_callback: function (res) {
//console.log(res);
$scope.vm.search.Client = res.c;
$scope.vm.search.ClientName = res.n;
},
selectPol: function () {
$scope.action.is_show('master');
$scope.masterData.show($scope.vm.pol, $scope.action.selectPol_callback); },
selectPol_callback: function (res) {
//console.log(res);
$scope.vm.newJob.Pol = res.c;
},
selectExportJob: function () {
$scope.action.is_show('job');
$scope.masterData.show($scope.vm.job, $scope.action.selectJob_callback);
},
selectJob_callback: function (res) {
//console.log(res);
$scope.vm.newJob.JobNo = res.c;
},
is_show: function (type) {
for (var i = 0; i < $scope.action.data.length; i++) {
var obj = $scope.action.data[i];
var n = document.getElementById(obj);
var add = document.getElementById('add');
var save = document.getElementById('save');
if (type == obj) {
// $('#' + type).removeClass('hide');
n.style.display = "block";
}
else {
//$('#' + obj).addClass('hide');
n.style.display = "none";
}
if (type == "cargo") {
add.style.display = "table-cell";
save.style.display = "table-cell";
}
else {
add.style.display = "none";
save.style.display = "none";
}
}
},
selectAll: function () {
var btnSelect = document.getElementById('btnSelect');
if (btnSelect.innerHTML == "Select All")
btnSelect.innerHTML="UnSelect All";
else
btnSelect.innerHTML="Select All";
jQuery("input.checkbox").each(function () {
this.click();
});
},
assignDate: function () { var refnos = "";
jQuery("input.checkbox").each(function () {
if (this.checked)
refnos += this.id + ',';
});
var pos = refnos;
if (refnos.length > 0) {
SV_AssignExport.assign($scope.vm, pos, function (res) {
//console.log('=============', $scope.vm);
if (res.status == true) {
parent.notice('Assign Successful');
} else {
parent.notice('Assign False', '', 'error');
}
});
}
else {
parent.notice('Assign False,Pls select at least one', '', 'error');
}
},
assginToExport: function () {
var refnos = "";
jQuery("input.checkbox").each(function () {
if (this.checked)
refnos += this.id + ',';
});
var pos = refnos;
var newJobNo = document.getElementById('newJobNo');
if (newJobNo.value=="") {
parent.notice('Assign False! ', 'Pls select at least one Export Job', 'error');
}
else if (refnos=="") {
parent.notice('Assign False!', ' Pls select at least one', 'error');
}
else {
SV_AssignExport.assignToExport($scope.vm, pos, function (res) {
//console.log('=============', $scope.vm);
if (res.status == true) {
parent.notice('Assign Successful');
} else {
parent.notice('Assign False', '', 'error');
}
}); }
},
pick: function (row) {
SV_AssignExport.pickToExport($scope.vm,row, function (res) {
//console.log('=============', $scope.vm);
if (res.status == true) {
parent.notice('Assign Successful');
} else {
parent.notice('Assign False', '', 'error');
}
});
},
openStockList: function (row) {
$scope.action.is_show('cargo');
$scope.OrderId = row.Id;
SV_AssignExport.refresh_stock(row, $scope.action.openStockList_callback);
},
openStockList_callback: function (res) {
$scope.masterData.show($scope.vm.sku,null);
},
addStock: function (par) {
var add = document.getElementById('newStock');
var save = document.getElementById('save');
if (par == "New") {
$scope.newStock = {};
add.style.display = "table-row";
save.style.display = "none";
}
else if (par == "Save") {
$scope.newStock.OrderId = $scope.OrderId;
SV_AssignExport.saveStock($scope.newStock, 'ONE', function (res) {
//console.log('=============', $scope.vm);
if (res.status == true) {
parent.notice('Save Successful');
add.style.display = "none";
} else {
parent.notice('Save False', '', 'error');
}
});
}
},
cancelStock: function () {
var save = document.getElementById('save');
var add = document.getElementById('newStock');
save.style.display = "table-cell";
add.style.display = "none";
},
saveStock: function () {
var add = document.getElementById('newStock');
SV_AssignExport.saveStock($scope.vm.sku,'ALL', function (res) {
//console.log('=============', $scope.vm);
if (res.status == true) {
parent.notice('Save Successful');
add.style.display = "none";
} else {
parent.notice('Save False', '', 'error');
}
});
},
}
$scope.masterData = {
data: {
list: [],
no: '',
title: '',
selectCallback: null, },
show: function (dd, cb) {
$scope.masterData.data = dd;
$scope.masterData.selectCallback = cb;
$scope.masterData.popup.show($scope.masterData);
},
hide: function () {
$scope.masterData.data = {};
$scope.masterData.popup.hide($scope.masterData);
},
select: function (row) {
if ($scope.masterData.selectCallback && typeof ($scope.masterData.selectCallback) == 'function') {
//$scope.action.selectClient_callback(row);
$scope.masterData.selectCallback(row);
}
$scope.masterData.hide();
},
}
$scope.pager = {
//===========data.totalItems: 0,
//===========data.totalPages: 10,
//===========data.curPage: 0,
//===========data.pageSize: '15',
data: SV_AssignExport.GetData().pager,
refresh: function () {
$scope.action.search();
//console.log('============ refresh');
}
} SV_Popup.SetPopup($scope.masterData, 'center');
//$scope.action.get_booking(clientRefNo.value);files
})

显示的页面分别引用上面的文件

在<html xmlns="http://www.w3.org/1999/xhtml" >添加属性ng-app="app"

在body 添加属性ng-controller="Ctrl_AssignExport"