一个简易版的Angular js 三层 示例
var myApp = angular.module('produceline', []);
myApp.factory('ajax', ["$http", "$q", "$log", function ($http, $q, $log) {
return {
//post请求,第一个参数是URL,第二个参数是向服务器发送的参数(JSON对象),
post: function (url, data, funsuccess) {
var deferred = $q.defer();
var tempPromise;
if (data != null && data != undefined && data != "") {
tempPromise = $http.post(url, data);
} else {
tempPromise = $http.post(url);
}
tempPromise.success(function (data, header, config, status) {
deferred.resolve(data);
}).error(function (msg, code) {
$log.error(msg, "post url:" + url + " 出错,代码:" + code);
deferred.reject(msg);
});
return deferred.promise.then(funsuccess);
},
//get请求,第一个参数是URL,第二个参数是向服务器发送的参数(JSON对象), 此方法有问题
get: function (url, data, funsuccess) {
var deferred = $q.defer();
var tempPromise;
//判断用户是否传递了参数,如果有参数需要传递参数
if (data != null && data != undefined && data != "") {
tempPromise = $http.get(url, data); //params {params: {id:5}}
} else {
tempPromise = $http.get(url);
}
tempPromise.success(function (data, header, config, status) {
deferred.resolve(data);
}).error(function (msg, code) {
deferred.reject(msg);
$log.error(msg, "get Url:" + url + " 出错,代码:" + code);
});
return deferred.promise.then(funsuccess);
}
};
}]);
myApp.controller('producelineController', ['$scope', "ajax", function ($scope, ajax) {
//扫描枪中止符 13 为回车
$scope.endWidthScan = 13;
$scope.model = {};
$scope.partSegments = []; //生产线分段
$scope.init = function () {
$("#scantxt").focus();
$.extend($scope.model, modeljson);
$scope.partSegments = partSegments || [];
//for (var i = 0; i < $scope.partSegments.length; i++) {
// $scope.partcodesmodel[$scope.partcodes[i]] = '';
//}
};
$scope.init();
$scope.SaveSacnedProduct = function (product) {
//一次保存一个扫描项
var data = {};
data[product] = $scope.ScanedHash[product];
ajax.post($scope.model.UrlLineSave, { 'id': $scope.model.ID, 'json': angular.toJson(data) }, function (response) {
console.log('get ' + $scope.model.UrlLineSave + ' return t:' + response.t);
})
};
$scope.newSegment = function () {
var seg = { SegmentName: '', SegmentCode: '', Remark: '' };
$scope.partSegments.push(seg);
};
$scope.delSegment = function (idx,array) {
array.splice(idx, 1)
};
$scope.ProductScanComplete = function () {
$scope.CopyToHash($scope.ScaningProduct);
$scope.ScaningProduct = "";
$scope.complete.push($scope.ScaningProduct)
$scope.PlaySuccess();
}
$scope.IsProductComplete = function (product) {
if (product == '' || product == null) {
return false;
}
for (var i = 0 ; i < $scope.partcodes.length ; i++) {
var t = $scope.partcodesmodel[$scope.partcodes[i]];
if (t && t != null && t != '') {
continue;
}
return false;
}
return true;
};
$scope.AllEmpty = function (product) {
for (var i = 0 ; i < $scope.partcodes.length ; i++) {
var t = $scope.partcodesmodel[$scope.partcodes[i]];
if (t == '') {
continue;
}
return false;
}
return true;
};
$scope.showJson = function () {
alert(angular.toJson(
{
//'complete': $scope.complete,
//'partcodes': $scope.complete,
//'partcodesmodel': $scope.partcodesmodel,
ScanedHash: $scope.ScanedHash,
ID: $scope.ID
//ScaningProduct: $scope.ScaningProduct,
//ScanedPartHash: $scope.ScanedPartHash,
//samecodecount: $scope.samecodecount
})
);
};
}]);
一个简易版的Angular js 三层 示例的更多相关文章
- 来,我们手写一个简易版的mock.js吧(模拟fetch && Ajax请求)
预期的mock的使用方式 首先我们从使用的角度出发,思考编码过程 M1. 通过配置文件配置url和response M2. 自动检测环境为开发环境时启动Mock.js M3. mock代码能直接覆盖g ...
- 使用 js 和 Beacon API 实现一个简易版的前端埋点监控 npm 包
使用 js 和 Beacon API 实现一个简易版的前端埋点监控 npm 包 前端监控,埋点,数据收集,性能监控 Beacon API https://caniuse.com/beacon 优点,请 ...
- 使用 js 实现一个简易版的模版引擎
使用 js 实现一个简易版的模版引擎 regex (function test() { this.str = str; })( window.Test = ...; format() { let ar ...
- 使用 js 实现一个简易版的 drag & drop 库
使用 js 实现一个简易版的 drag & drop 库 具有挑战性的前端面试题 H5 DnD js refs https://www.infoq.cn/article/0NUjpxGrqRX ...
- 使用 js 实现一个简易版的动画库
使用 js 实现一个简易版的动画库 具有挑战性的前端面试题 animation css refs https://www.infoq.cn/article/0NUjpxGrqRX6Ss01BLLE x ...
- 使用 js 实现一个简易版的 GIPHY 动图搜索 web 应用程序
使用 js 实现一个简易版的 GIPHY 动图搜索 web 应用程序 具有挑战性的前端面试题 API JAMstack refs https://www.infoq.cn/article/0NUjpx ...
- 使用 js 实现一个简易版的 async 库
使用 js 实现一个简易版的 async 库 具有挑战性的前端面试题 series & parallel 串行,并行 refs https://www.infoq.cn/article/0NU ...
- 使用 js 实现一个简易版的 vue 框架
使用 js 实现一个简易版的 vue 框架 具有挑战性的前端面试题 refs https://www.infoq.cn/article/0NUjpxGrqRX6Ss01BLLE xgqfrms 201 ...
- 手动实现一个简易版SpringMvc
版权声明:本篇博客大部分代码引用于公众号:java团长,我只是在作者基础上稍微修改一些内容,内容仅供学习与参考 前言:目前mvc框架经过大浪淘沙,由最初的struts1到struts2,到目前的主流框 ...
随机推荐
- JavaScript知识复习
JavaScript 数据类型 原始数据类型: number string boolean null undefined 对象:object: Function Array Date... 共有六种数 ...
- VUE框架学习——脚手架的搭建
#我的VUE框架学习 题记:初识VUE,觉得VUE十分的不错,故决定去深入的了解学习它,工欲善其事,必先利其器,下面是我搭建vue环境的过程! #一.项目搭建及初始化 1.安装:node.js:去官网 ...
- 微信小程序 获取数组长度
wxml中直接 {{array.length}} js中 array.length 小程序调用API返回的数据全部都是异步的:所以前提是要确保array中的数据,是存在的
- 运行npm start vue.js项目 出现 npm ERR! missing script: start 错误
npm ERR! missing script: start 错误 有可能缺少依赖包,运行nmp install安装依赖(一般都依赖很多包,过程有点慢),安装完后发现多一个 node_modules文 ...
- 入门python:《Python编程从入门到实践》中文PDF+英文PDF+代码学习
入门python推荐学习久负盛名的python入门书籍<Python编程从入门到实践>. 书中涵盖的内容是比较精简的,没有艰深晦涩的概念,最重要的是每个小结都附带有"动手试一试& ...
- 推荐《R数据可视化手册》高清英文版PDF+中文版PDF+源代码
绝大多数的绘图案例都是以强大.灵活制图而著称的R包ggplot2实现的,充分展现了ggplot2生动.翔实的一面.从如何画点图.线图.柱状图,到如何添加注解.修改坐标轴和图例,再到分面的使用和颜色的选 ...
- 除了 Microsoft Office我们还可以选择哪些软件?
不同的人有不同爱好,不同的人有着不同的人生追求,软件公司也是如此.尽管 Microsoft Office 比之前要便宜得多了,但其按时间累计的完整的安装版本的价格仍然很高,基于对普通用户亦或手头比较紧 ...
- mysql去掉密码规则的两种方式
环境介绍:centeros 7 + mysqld5.7 当我们装完数据库以后,使用临时密码登录到数据库去更改一个简单的密码,如 set password='; 结果出现以下提示: ERROR (HY0 ...
- ubuntu -redis
ubentu 布置redis,基本操作和CentO感觉相差不多,主要是使用命令有所差异 mark如下: ① download ② tar -zxvf xxx.tar.gz ③ cd redis-xxx ...
- HDOJ 2544 最短路(最短路径 dijkstra算法,SPFA邻接表实现,floyd算法)
最短路 Time Limit: 5000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Submis ...