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 ...
随机推荐
- Linq表达式、Lambda表达式你更喜欢哪个？
什么是Linq表达式?什么是Lambda表达式? 如图: 由此可见Linq表达式和Lambda表达式并没有什么可比性. 那与Lambda表达式相关的整条语句称作什么呢?在微软并没有给出官方的命名,在& ...
- 基于OpenCV的车辆检测与追踪的实现
最近老师布置了一个作业,是做一个基于视频的车辆检测与追踪,用了大概两周的时间做了一个简单的,效果不是很理想,但抑制不住想把自己的一些认识写下来,这里就把一些网络上的博客整理一下分享给大家,希望帮助到大 ...
- SQLSERVER聚集索引与非聚集索引的再次研究（上）
SQLSERVER聚集索引与非聚集索引的再次研究(上) 上篇主要说聚集索引 下篇的地址:SQLSERVER聚集索引与非聚集索引的再次研究(下) 由于本人还是SQLSERVER菜鸟一枚,加上一些实验的逻 ...
- 设计模式之创建类模式大PK
创建类模式大PK 创建类模式包括工厂方法模式.建造者模式.抽象工厂模式.单例模式和原型模式,他们能够提供对象的创建和管理职责.其 ...
- js数组学习整理
原文地址:js数组学习整理 常用的js数组操作方法及原理 1.声明数组的方式 var colors = new Array();//空的数组 var colors = new Array(3); // ...
- SAP CRM 性能小技巧
导言 本页面打算收集SAP CRM实施中可以用于避免性能问题的注意事项,重要的事项会由图标标识. 如果你有其他的技巧想要说出来,别犹豫! 性能注意事项 通用 缓存读取类访问,特别是在性能关键的地方,比 ...
- Android:Activity+Fragment及它们之间的数据交换.
Android:Activity+Fragment及它们之间的数据交换 关于Fragment与Fragment.Activity通信的四种方式 比较好一点的Activity+Fragment及它们之间 ...
- CentOS 7 安装出现 /dev/root does not exits 导致无法安装的问题
本人在官网下的是这个 CentOS-7-x86_64-DVD-1611.iso ,然后用UltraISO 9.6制作的U盘启动盘,不过在安装的时候出现了这个错误, 然后也是搜了好久,试了一下,下面这个 ...
- date命令
GNU的date提供+%s(小写s), 能打印出自1970-01-01 00:00:00到当前时间的秒数. 这可能大家都不陌生,但有两点需要注意: 1. %s存在于GNU扩展版本.像在solaris等 ...
- 猫哥网络编程系列：详解 BAT 面试题
从产品上线前的接口开发和调试,到上线后的 bug 定位.性能优化,网络编程知识贯穿着一个互联网产品的整个生命周期.不论你是前后端的开发岗位,还是 SQA.运维等其他技术岗位,掌握网络编程知识均是岗位的 ...