angular-tutorial
angular-tutorial copied to clipboard
Published
20 hours ago •
Wscats
Wscats
service demo
<!DOCTYPE html>
<html ng-app="wsscat">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no">
<title></title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
canvas {
width: 100%;
height: 500px;
}
</style>
<body>
<div ng-controller="homeCtrl">
<input ng-model="first" />
<input ng-model="second" />
</div>
<div ng-controller="indexCtrl">
<input ng-model="first" />
<input ng-model="second" />
<button ng-click="start()">start</button>
<button ng-click="clear()">clear</button>
</div>
</body>
<script src="angular.js"></script>
<script type="text/javascript">
var app = angular.module('wsscat', []);
app.controller('homeCtrl', function($scope) {
$scope.first = 20;
$scope.second = 30;
$scope.$watch('first', function(data) {
console.log(data)
})
})
app.controller('indexCtrl', function($scope, hh, $document, $http, $interval) {
console.log(hh)
$scope.start = function() {
$scope.line = hh.m(0, 0, "indexCtrl");
console.log($scope.line)
//$scope.line.lineTo(50, 60);
$scope.line.lineWidth = 1;
$scope.line.strokeStyle = 'red';
$scope.line.stroke();
}
$scope.start();
$scope.clear = function() {
hh.c()
}
var offset = 5;
$interval(function() {
$http.get('shullfe.php').success(function(data) {
offset += 5;
console.log($scope.line)
$scope.line.lineTo(offset, data);
$scope.line.lineWidth = 0.1;
$scope.line.strokeStyle = 'red';
$scope.line.stroke();
})
}, 1000)
//hh.e("indexCtrl")
//console.log($document[0].querySelectorAll('[ng-controller=indexCtrl]'))
//var canvasList = $document[0].querySelectorAll('[ng-controller=indexCtrl]');
//var canvas = canvasList[0].getElementsByTagName("canvas");
//console.log(canvas[0])
//$scope.$watch('first', function(data) {
// console.log(data)
//})
})
app.service('hh', function($document) {
return {
m: function(a, b, Ctrl) {
var can = this.e(Ctrl);
//var can = $document[0].getElementById('can');
var cans = can.getContext('2d');
cans.moveTo(a, b); //第一个起点
//cans.lineTo(c, d); //第二个点
//cans.lineTo(220, 60); //第三个点（以第二个点为起点）
cans.lineWidth = 1;
//当两条线条交汇时，创建圆形边角
cans.lineJoin = "round";
cans.strokeStyle = 'red';
//cans.stroke();
//返回cans，方便我们在控制器中画图
return cans;
},
//清除画布
c: function() {
var can = $document[0].getElementById('can');
var cans = can.getContext('2d');
cans.clearRect(0, 0, 500, 500);
},
e: function(Ctrl) {
//获取对应控制器下的DOM结构
var canvasList = $document[0].querySelectorAll('[ng-controller=' + Ctrl + ']');
//在上面获取的DOM结构范围内生成一个canvas标签
var canvas = $document[0].createElement('canvas');
//配置canvas的id属性
canvas.id = Ctrl + 'Canvas';
//添加到该DOM结构下
canvasList[0].appendChild(canvas);
//canvas.width = 100;
//canvas.height = 500;
//var canvas = canvasList[0].getElementsByTagName("canvas");这个canvas跟上面的canvas是一样的
return canvas;
}
}
})
</script>
</html>
.service('OrderFrom', [
function() {
var OrderFrom = {
browser: {
versions: function() {
var u = navigator.userAgent,
app = navigator.appVersion;
return { //移动终端浏览器版本信息
trident: u.indexOf('Trident') > -1, //IE内核
presto: u.indexOf('Presto') > -1, //opera内核
webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或uc浏览器
iPhone: u.indexOf('iPhone') > -1, //是否为iPhone或者QQHD浏览器
iPad: u.indexOf('iPad') > -1, //是否iPad
webApp: u.indexOf('Safari') == -1 //是否web应该程序，没有头部与底部
};
}(),
language: (navigator.browserLanguage || navigator.language).toLowerCase()
},
from: function(e) {
if (this.browser.versions.mobile) { //判断是否是移动设备打开。browser代码在上面面
var ua = navigator.userAgent.toLowerCase(); //获取判断用的对象
if (ua.match(/MicroMessenger/i) == "micromessenger") {
//在微信中打开
return e?this.debug("weixin"):"weixin";
}
if (ua.match(/WeiBo/i) == "weibo") {
//在新浪微博客户端打开
return e?this.debug("weibo"):"weibo";
}
/*if (ua.match(/QQ/i) == "qq") {
//在QQ空间打开
return e?this.debug("Qzone"):"Qzone";
}
if (this.browser.versions.ios) {
//是否在IOS浏览器打开
return e?this.debug("ios"):"ios";
}
if (this.browser.versions.android) {
//是否在安卓浏览器打开
return e?this.debug("android"):"android";
}*/
else{
return e?this.debug("browser"):"browser";
}
} else {
//否则就是PC浏览器打开
return e?this.debug("browser"):"browser";
}
},
debug: function(e){
alert(e);
}
}
return OrderFrom;
}
])
