angularjs 1 开发简单案例(包含common.js,service.js,controller.js,page)
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 \
<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"
angularjs 1 开发简单案例(包含common.js,service.js,controller.js,page)的更多相关文章
- Android Studio JNI 开发简单案例
转载:http://www.androidchina.net/5744.html 进程保活,热修复,硬件接入等等都需要底层的支持,而底层代码是 C .C++ 写的,那么在 Android 中怎么调用底 ...
- 《Node.js+MongoDB+AngularJS Web开发》读书笔记及联想
总体介绍 <Node.js+MongoDB+AngularJS Web开发>,于2015年6月出版,是一本翻译过来的书,原书名为<Node.js,MongoDB and Angula ...
- 前端 go.js 流程图基于vue开发项目案例
一.流程图效果 最近一段时间在研究go.js,它是一款前端开发画流程图的一个插件,也是一个难点,要说为什么是难点,首先,它是依赖画布canvas知识开发.其次,要依赖于内部API开发需求,开发项目需求 ...
- vue.js的学习中的简单案例
今天学习了近年来挺火的一门JS技术,叫vue.js下面是它的一个简单案例: <html> <head> <title>$Title$</title> / ...
- python——flask常见接口开发（简单案例）
python——flask常见接口开发(简单案例)原创 大蛇王 发布于2019-01-24 11:34:06 阅读数 5208 收藏展开 版本:python3.5+ 模块:flask 目标:开发一个只 ...
- 基于Debian搭建Hyperledger Fabric 2.4开发环境及运行简单案例
相关实验源码已上传:https://github.com/wefantasy/FabricLearn 前言 在基于truffle框架实现以太坊公开拍卖智能合约中我们已经实现了以太坊智能合约的编写及部署 ...
- vue 2 使用Bus.js进行兄弟(非父子)组件通信 简单案例
vue2中废弃了$dispatch和$broadcast广播和分发事件的方法.父子组件中可以用props和$emit().如何实现非父子组件间的通信,可以通过实例一个vue实例Bus作为媒介,要相互通 ...
- 25个超有用的 AngularJS Web 开发工具
AngularJS是为了克服HTML在构建应用上的不足而设计的.HTML是一门很好的为静态文本展示设计的声明式语言,改善了JavaScript. 下面我要说的就是25个超有用的AngularJS工具, ...
- Node.js学习笔记——Node.js开发Web后台服务
一.简介 Node.js 是一个基于Google Chrome V8 引擎的 JavaScript 运行环境.Node.js 使用了一个事件驱动.非阻塞式 I/O 的模型,使其轻量又高效.Node.j ...
随机推荐
- Unity3d学习 制作地形
这周学习了如何在unity中制作地形,就是在一个Terrain的对象上盖几座小山,在山底种几棵树,那就讲一下如何完成上述内容. 1.在新键得项目的游戏的Hierarchy目录中新键一个Terrain对 ...
- HashSet HashTable 与 TreeSet
HashSet<T>类 HashSet<T>类主要是设计用来做高性能集运算的,例如对两个集合求交集.并集.差集等.集合中包含一组不重复出现且无特性顺序的元素. HashSet& ...
- 水印第三版 ~ 变态水印（这次用Magick.NET来实现，附需求分析和源码）
技能 汇总:http://www.cnblogs.com/dunitian/p/4822808.html#skill 以前的水印,只是简单走起,用的是原生态的方法.现在各种变态水印,于是就不再用原生态 ...
- 关于Raid0,Raid1,Raid5,Raid10的总结
RAID0 定义: RAID 0又称为Stripe或Striping,它代表了所有RAID级别中最高的存储性能.RAID 0提高存储性能的原理是把连续的数据分散到多个磁盘上存取,这样,系统有数据请求就 ...
- C#中5步完成word文档打印的方法
在日常工作中,我们可能常常需要打印各种文件资料,比如word文档.对于编程员,应用程序中文档的打印是一项非常重要的功能,也一直是一个非常复杂的工作.特别是提到Web打印,这的确会很棘手.一般如果要想选 ...
- 2Sum
用哈希表(unordered_map)使得时间复杂度从O(n*n)降到O(n),空间复杂度从O(1)增到O(n):一边找一边插入哈希表 注意 在C++11以前要使用unordered_map需要 #i ...
- 灵魂宝石 bzoj 2663
灵魂宝石(1s 128MB)soulgem [问题描述] "作为你们本体的灵魂,为了能够更好的运用魔法,被赋予了既小巧又安全的外形" 我们知道,魔法少女的生命被存放于一个称为灵魂宝 ...
- SharePoint 2016 必备组件离线安装介绍
前言 SharePoint 必备组件安装,一直以来都是SharePoint安装过程中的最大的坑,尤其是不能联网的服务器.博主在这里简单介绍一下离线安装过程,并附组件包下载以及安装命令,并且在windo ...
- Android—基于微信开放平台v3SDK，开发微信支付填坑。
接触微信支付之前听说过这是一个坑,,,心里已经有了准备...我以为我没准跳坑出不来了,没有想到我填上了,调用成功之后我感觉公司所有的同事都是漂亮的,隔着北京的大雾霾我仿佛看见了太阳~~~好了,装逼结束 ...
- 关于MJRefresh的下拉加载数据bug
当没有更多数据的时候显示NoMoreData 我的理解是先结束刷新再显示没有更多 今天之前一直没发现有问题 贴之前的代码 [self.collectionView reloadData]; [self ...