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 ...
随机推荐
- 深入理解JS 执行细节
javascript从定义到执行,JS引擎在实现层做了很多初始化工作,因此在学习JS引擎工作机制之前,我们需要引入几个相关的概念:执行环境栈.全局对象.执行环境.变量对象.活动对象.作用域和作用域链等 ...
- Android和JavaScript相互调用的方法
转载地址:http://www.jb51.net/article/77206.htm 这篇文章主要介绍了Android和JavaScript相互调用的方法,实例分析了Android的WebView执行 ...
- 移动应用App测试与质量管理一
测试工程师 基于Html的WebApp测试, 现在一些移动App混Html5 HTML5性能测试 兼容性 整理后的脑图 测试招聘 弱化大量技术考察 看重看问题的高度 看重潜力 测试经验 质量管理 专项 ...
- 餐饮连锁公司IT信息化解决方案一
从餐饮企业的信息化需求来说,没有哪一种解决方案能满足所有餐饮企业的信息化建设需要.不同的餐饮业态有不同的业务流程,不同业态的信息化解决方案是目前餐饮企业信息化建设急需的,这种一站式整 ...
- ActionContext.getContext().getSession()
ActionContext.getContext().getSession() 获取的是session,然后用put存入相应的值,只要在session有效状态下,这个值一直可用 ActionConte ...
- Android中Fragment和ViewPager那点事儿（仿微信APP）
在之前的博文<Android中使用ViewPager实现屏幕页面切换和引导页效果实现>和<Android中Fragment的两种创建方式>以及<Android中Fragm ...
- Web前端需要熟悉大学里【高大上】的计算机专业课吗？
作为一名刚刚大学毕业,进入新的学习阶段的研究生,我必须说大学的专业课非常重要!不管你信不信,事实就是如此! 一.大学学习的专业课非常重要,它决定了我们能走到什么高度 前端的发展非常快,我常常觉得刚刚关 ...
- oracle 存储过程
来自:http://www.jb51.net/article/31805.htm Oracle存储过程基本语法 存储过程 1 CREATE OR REPLACE PROCEDURE 存储过程名 2 I ...
- ENode框架Conference案例分析系列之 - 文章索引
ENode框架Conference案例分析系列之 - 业务简介 ENode框架Conference案例分析系列之 - 上下文划分和领域建模 ENode框架Conference案例分析系列之 - 架构设 ...
- WPF - 属性系统 （3 of 4）
依赖项属性元数据 在前面的章节中,我们已经介绍了WPF依赖项属性元数据中的两个组成:CoerceValueCallback回调以及PropertyChangedCallback.而在本节中,我们将对其 ...