一个简易版的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,到目前的主流框 ...
随机推荐
- ubuntu 18.04网卡命名规则改回传统的ethx
自15版本开始网卡命名规则就不叫eth0了.而是用可预期网络接口设备名称的命名规则,比如网卡名为enp3s0 . 如果想要变回ethx也是可以的,参考以下步骤: 1.编辑/etc/default/gr ...
- 用 while 循环做个小游戏
import random #可输入次数 flag = 0 #生成一个1到10之间的随机整数 res = random.randint(1,10) #判读三次输入机会 while(flag<3) ...
- Kubernetes1.5 集成Heapster
Kubernetes1.5 集成Heapster Heapster是kubernetes集群监控工具.在1.2的时候,kubernetes的监控需要在node节点上运行cAdvisor作为agent收 ...
- ECNUOJ 2150 完美的拯救
完美的拯救 Time Limit:1000MS Memory Limit:65536KBTotal Submit:147 Accepted:50 Description 一只可怜的蚂蚁被万恶的魔术师 ...
- POJ 3869 Headshot
Headshot Time Limit: 1000ms Memory Limit: 65536KB This problem will be judged on PKU. Original ID: 3 ...
- Hadoop集群管理--保证集群平稳地执行
本篇介绍为了保证Hadoop集群平稳地执行.须要深入掌握的知识.以及一些管理监控的手段,日常维护的工作. HDFS 永久性数据结构 对于管理员来说.深入了解namenode,辅助namecode和da ...
- 使用Opencv2遇到error C2061: 语法错误: 标识符dest
在写代码是遇到了这样一个问题,error C2061: 语法错误: 标识符"dest": 1>d:\opencv\opencv\build\include\opencv2\f ...
- 文件的默认权限:umask
1. 文件的默认权限 linux下当我们新建一个文件和文件夹时,该文件和文件夹的默认权限是什么? 通过umask命令来查看: $ umask 0002 $ umask -S u=rwx,g=rwx,o ...
- 理解Linq查询
using System; using System.Linq; static class Program { static double Square(double n) { Console.Wri ...
- Git简介以及与SVN的区别
Git是由著名Linux内核(Kernel)开发者LinusTorvalds为了便利维护Linux而开发的. Git是一个分布式的版本控制系统.作为一个分布式的版本控制系统,在Git中并不存在主库这样 ...