service demo - Githubissues

<!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;
    }
])

Wscats / angular-tutorial

service demo #23