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 ...
随机推荐
- Oracle分析函数入门
一.Oracle分析函数入门 分析函数是什么?分析函数是Oracle专门用于解决复杂报表统计需求的功能强大的函数,它可以在数据中进行分组然后计算基于组的某种统计值,并且每一组的每一行都可以返回一个统计 ...
- ASP.NET Core 中的那些认证中间件及一些重要知识点
前言 在读这篇文章之间,建议先看一下我的 ASP.NET Core 之 Identity 入门系列(一,二,三)奠定一下基础. 有关于 Authentication 的知识太广,所以本篇介绍几个在 A ...
- Storm如何保证可靠的消息处理
作者:Jack47 PS:如果喜欢我写的文章,欢迎关注我的微信公众账号程序员杰克,两边的文章会同步,也可以添加我的RSS订阅源. 本文主要翻译自Storm官方文档Guaranteeing messag ...
- Chrome出了个小bug：论如何在Chrome下劫持原生只读对象
Chrome出了个小bug:论如何在Chrome下劫持原生只读对象 概述 众所周知,虽然JavaScript是个很灵活的语言,浏览器里很多原生的方法都可以随意覆盖或者重写,比如alert.但是为了保证 ...
- 【Machine Learning】决策树案例：基于python的商品购买能力预测系统
决策树在商品购买能力预测案例中的算法实现 作者:白宁超 2016年12月24日22:05:42 摘要:随着机器学习和深度学习的热潮,各种图书层出不穷.然而多数是基础理论知识介绍,缺乏实现的深入理解.本 ...
- C++随笔：.NET CoreCLR之GC探索（3）
有几天没写GC相关的文章了哈,今天我讲GC的方式是通过一个小的Sample来讲解,这个小的示例代码只有全部Build成功了才会有.地址为D:\coreclr2\coreclr\bin\obj\Wind ...
- [原] KVM 虚拟化原理探究（2）— QEMU启动过程
KVM 虚拟化原理探究- QEMU启动过程 标签(空格分隔): KVM [TOC] 虚拟机启动过程 第一步,获取到kvm句柄 kvmfd = open("/dev/kvm", O_ ...
- 脑洞大开之采用HTML5+SignalR2.0(.Net)实现原生Web视频
目录 对SignalR不了解的人可以直接移步下面的目录 SignalR系列目录 前言 - -,我又来了,今天废话不多说,我们直接来实现Web视频聊天. 采用的技术如下: HTML5 WebRTC Si ...
- 微信小程序开发日记——高仿知乎日报（上）
本人对知乎日报是情有独钟,看我的博客和github就知道了,写了几个不同技术类型的知乎日报APP 要做微信小程序首先要对html,css,js有一定的基础,还有对微信小程序的API也要非常熟悉 我将该 ...
- 敏捷转型历程 - Sprint3 Planning
我: Tech Leader 团队:团队成员分布在两个城市,我所在的城市包括我有4个成员,另外一个城市包括SM有7个成员.另外由于我们的BA离职了,我暂代IT 的PO 职位.PM和我在一个城市,但他不 ...