angularJS移动应用触摸touch事件

首先我们定义一个指定(directive),如下面代码:

.directive('myTouchEven', ['$swipe', "$rootScope", function ($swipe, $rootScope) {
    return {
        restrict: 'EA',
        link: function (scope, ele, attrs, ctrl) {
            var startX, pointY;
            $swipe.bind(ele, {
                'start': function (coords) {
                    startX = coords.x;
                    pointY = coords.y;
                    c("startX:" + startX + "pointY:" + pointY)
                },
                'move': function (coords) {
                    var a = coords.x - startX;
                    if (a < -100 && a > -110) {
                        startX = coords.x;
                        $rootScope.$broadcast("TouchEven", "back");
                    } else if (a > 100 && a < 110) {
                        startX = coords.x;
                        $rootScope.$broadcast("TouchEven", "next");
                    }
                    c("move:" + a + " coords.x:" + coords.x)

                },
                'end': function (coords) {
                    c("end")
                    c("endX:" + coords.x + "endY:" + coords.y)
                },
                'cancel': function (coords) {
                    c("cancel")
                }
            });
        }
    }
}])

这里使用$swipe来帮顶触摸事件,在start事件中记录开始点击的坐标值(x、y)的数据;然后我们监控move事件,计算当前的坐标值(x、y)于开始点击的坐标值相差是多少,如果大于或者小于我们设定的数值,那么则发送一个全局广播,这里注入了$rootScope,用来发送全局广播($broadcast),其他指令(directive)、服务(service)、控制器(controller)等只要注册了(TouchEven)广播监听,就能接收到我们发送的广播事件,下面是示例代码:

.controller("ListController", function ($scope, $routeParams,ajax) {
    $scope.pages = 1;

    $scope.$on("TouchEven",function(a,b){
        var is_send = null;
        if(is_send == null){
            is_send = 1;

            if(b == "back"){
                $scope.pages -= 1;
            }else if(b == "next"){
                $scope.pages += 1;
            }

            ajax.get("/api/v1/articleList",{pages:$scope.pages})
                .success(function(data){
                    is_send = null;
                    c(data)
                    /**
                     * write something code.
                     */

                })
                .error(function(err){
                    is_send = null;
                    toast(err.response_err)
                    /**
                     * write something code.
                     */
                })


        }


    });
    
})

 

 

蓝芯会员管理系统V1开源(易语言源代码)

a001

a002

 

今天,终于把蓝芯会员管理系统V1开源了,开源不意味着我不会再继续跟进这个软件,当出现BUG的时候,我还是会及时更新的;这两年来,工作总是繁忙的,没有时间去跟进蓝芯会员管理系统V1的项目,还不如直接开源,给有用的人进行适当的修改,或许可以帮到更多人。

申明:

本页面的软件遵照GPL协议开放源代码,您可以自由传播和修改,在遵照下面的约束条件的前提下:

一. 只要你在蓝芯会员管理系统V1开源软件的每一副本上明显和恰当地出版版权声明,保持此许可证的声明和没有担保的声明完整无损,并和程序一起给每个其他的程序接受者一份许可证的副本,你就可以用任何媒体复制和发布你收到的原始的程序的源代码。你也可以为转让副本的实际行动收取一定费用,但必须事先得到的同意。

二.你可以修改蓝芯会员管理系统V1开源软件的一个或几个副本或程序的任何部分,以此形成基于程序的作品。只要你同时满足下面的所有条件,你就可以按前面第一款的要求复制和发布这一经过修改的程序或作品。

1. 你必须在修改的文件中附有明确的说明:你修改了这一文件及具体的修改日期。

2. 你必须使你发布或出版的作品(它包含程序的全部或一部分,或包含由程序的全部或部分衍生的作品)允许第三方作为整体按许可证条款免费使用。

3. 如果修改的程序在运行时以交互方式读取命令,你必须使它在开始进入常规的交互使用方式时打印或显示声明:包括适当的版权声明和没有担保的声明(或者你提供担保的声明);用户可以按此许可证条款重新发布程序的说明;并告诉用户如何看到这一许可证的副本。(例外的情况:如果原始程序以交互方式工作,它并不打印这样的声明,你的基于程序的作品也就不用打印声明。

三.只要你遵循一、二条款规定,您就可以自由使用并传播本源代码,但必须原封不动地保留原作者信息。

四.压缩包的密码是:lanxinbase.com;源码的密码是:5520,除了蓝芯框架模块源码未公开,其余的全部公开。

五.下载网址:链接: https://pan.baidu.com/s/1b4nC6q 密码: ****

angularJS使用directive指令、filter来做表单过滤器

directive做过滤器要人性化很多,但是如果是简单的过滤也可以使用filter来做,设置一个全局变量保存数据验证结果,等到提交表单的时候验证全局变量就可以了:

.directive("myFilter",function(){
    var css = {
        _valid:function(ele){
            ele.removeClass("ng-invalid");
            ele.next().removeClass("hide");
            ele.next().removeClass("input_remove");
            ele.next().removeClass("glyphicon-remove");

            ele.addClass("ng-valid");
            ele.next().addClass("input_ok");
            ele.next().addClass("glyphicon-ok");
        },
        _invalid:function(ele){
            ele.removeClass("ng-valid");
            ele.next().removeClass("input_ok");
            ele.next().removeClass("glyphicon-ok");

            ele.addClass("ng-invalid");
            ele.next().addClass("input_remove");
            ele.next().addClass("glyphicon-remove");
        }
    };
    return {
        require:'ngModel',
        link:function(scope,ele,arrts){
            scope.$watch(arrts.ngModel,function(newVal,oldVal){
                if(typeof newVal != "undefined"){
                    css._valid(ele);
                    if(typeof arrts.type != "undefined"){
                        switch (arrts.type){
                            case 'text':
                                if(typeof newVal != "string"){
                                    css._invalid(ele);
                                }

                                if(typeof arrts.min != "undefined"){
                                    if(newVal.length < arrts.min){
                                        css._invalid(ele);
                                    }
                                }

                                if(typeof arrts.max != "undefined"){
                                    if(newVal.length > arrts.max){
                                        css._invalid(ele);
                                    }
                                }
                                break;
                            case 'number2':
                                var filter  = /^[0-9]+.?[0-9]*$/;
                                if(!filter.test(newVal)){
                                    css._invalid(ele);
                                }

                                if(typeof arrts.min != "undefined"){
                                    if(newVal < parseInt(arrts.min)){

                                        css._invalid(ele);
                                    }
                                }

                                if(typeof arrts.max != "undefined"){
                                    if(newVal > parseInt(arrts.max)){
                                        css._invalid(ele);
                                    }
                                }
                                break;
                            case 'email2':
                                var filter  = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
                                if(!filter.test(newVal)){
                                    css._invalid(ele);
                                }
                                break;
                        }
                    }
                }


            });
        }

    };
})
.filter('email2',function(){
    //感觉这个不人性化,也可能是我不会用吧
    return function(input,length){
        if(typeof input == "undefined" || length < input.length){
            //c("输入不合规");
        }
        return input;
    }
})

 

下面是style的代码:

input.ng-invalid {
    border: 1px solid red;
}
input.ng-valid {
    border: 1px solid green;
}
.input_ok{
    position: absolute;
    z-index: 100;
    right: 1%;
    top: 8px;
    color: #299429;
}
.input_remove{
    position: absolute;
    z-index: 100;
    right: 1%;
    top: 8px;
    color: #ff0000;
}
.form-contant p{
    position: relative;
}

下面是表单html的代码:

<div class="form-contant">
    <h1>Register</h1>
    <p>
        <input type="text" ng-model="user_name" placeholder="请输入用户名" class="form-control" my-filter data="{{user_name|email2:4}}" min="4" max="20">
        <i class="glyphicon glyphicon-ok hide"></i>
    </p>
    <p>
        <input type="text" ng-model="user_pwd" placeholder="请输入密码" class="form-control" my-filter min="4" max="20">
        <i class="glyphicon glyphicon-ok hide"></i>
    </p>
    <p>
        <input type="number2" ng-model="age" placeholder="请输入年龄" class="form-control" my-filter min="4" max="102">
        <i class="glyphicon glyphicon-ok hide"></i>
    </p>
    <p>
        <input type="email2" ng-model="email" placeholder="请输入邮箱" class="form-control" value="" my-filter  min="6" max="50">
        <i class="glyphicon glyphicon-ok hide"></i>
    </p>


    <br>
    <button type="button" class="form-control" ng-click="get()">get</button>
    <button type="button" class="form-control" ng-click="save()">save</button>
    <button type="button" class="form-control" ng-click="put()">put</button>
</div>

 

 

angularJS开发promise对象使用方法

创建一个服务对象:

.factory("UserSerice",function($q,$http,ajax){
    var _url = '/api/v1/user/';

    return {
        get:function(id,param){
            var defer = $q.defer();
            $http.get(ajax.parseParam(_url + id,param))
                .success(function(data){
                    defer.resolve(data);
                })
                .error(function(data){
                    defer.reject(data);
                })
            return defer.promise;
        },
        save:function(param){
            var defer = $q.defer();
            $http.post(_url,param)
                .success(function(data){
                    defer.resolve(data);
                })
                .error(function(data){
                    defer.reject(data);
                })
            return defer.promise;
        },
        put:function(id,param){
            var defer = $q.defer();
            $http.put(_url + id,param)
                .success(function(data){
                    defer.resolve(data);
                })
                .error(function(data){
                    defer.reject(data);
                })
            return defer.promise;
        }

    }
})

 

服务包含增改查,3种方法,下面是使用方法:

.controller("controllerMain", function ($scope,UserSerice) {
    var user_promise;
    $scope.get = function () {
        c($scope.user_id)
        user_promise = UserSerice.get($scope.user_id,{});
        user_promise.then(function(data){
            c("user_promise:succ")
            c(data);

        },function(data){
            c("user_promise:err")
            c(data);

        });


    }

    $scope.save = function () {
        user_promise = UserSerice.save({user_name:$scope.user_name,user_pwd:$scope.user_pwd,email:$scope.email});
        user_promise.then(function(data){
            c("save:user_promise:succ")
            c(data);
            if(data.response_code == 1){
                $scope.user_id = data.user_id;
            }

        },function(data){
            c("save:user_promise:err")
            c(data);

        });

    }

    $scope.put = function () {

        user_promise = UserSerice.put($scope.user_id,{user_name:$scope.user_name,user_pwd:$scope.user_pwd,email:$scope.email});
        user_promise.then(function(data){
            c("put:user_promise:succ")
            c(data);

        },function(data){
            c("put:user_promise:err")
            c(data);

        });

    }

})

 

angularJS创建拦截注入$httpProvider、interceptor 、auth

angularJS创建拦截注入,为每个$http请求添加auth权限请求:

var app = angular.module("myApp", ["ngRoute", "ngResource"])
    .constant('ACCESS_LEVELS',{
        PUB:1,
        USER:2
    })
    .config(["$routeProvider", "$httpProvider","ACCESS_LEVELS", function ($routeProvider, $httpProvider,ACCESS_LEVELS) {

        //设置http头
        $httpProvider.defaults.headers.common["X-Response-Code-By"] = "Angular1.5.8";

        var interceptor = function ($q, $rootScope, auth) {
            return {
                'response': function (res) {
                    //登录成功,设置authkey
                    if (res.config.url.indexOf('/api/v1/login')!=-1) {
                        auth.set(res.data.auth);
                    }
                    return res;
                },
                'responseError': function (rejection) {
                    switch (rejection.status) {
                        case 401:
                            if (res.config.url.indexOf('/api/v1/login')!=-1) {
                                // 如果当前不是在登录页面
                                $rootScope.$broadcast('auth:loginRequired');
                            }
                            break;
                        case 403:
                            $rootScope.$broadcast('auth:forbidden');
                            break;
                        case 404:
                            $rootScope.$broadcast('page:notFound');
                            break;
                        case 500:
                            $rootScope.$broadcast('server:error');
                            break;

                    }
                    return $q.reject(rejection);
                },
                'request': function (config) {

                    //为每条服务器请求加入auth权限
                    if(config.url.indexOf("api/v1/") > -1){
                        if(config.url.indexOf("?") != -1){
                            config.url += "&auth="+auth.get();
                        }else{
                            config.url += "?auth="+auth.get();
                        }

                    }
                    return config;
                },
                'requestError': function (rejection) {
                    if (canRecover(rejection)) {
                        return responseOrNewPromise
                    }
                    return $q.reject(rejection);
                },
            };
        };


        $httpProvider.interceptors.push(interceptor);

        //路由
        $routeProvider
            .when("/", {
                templateUrl: "view/main.html",
                controller: "controllerMain",
                access_level:ACCESS_LEVELS.PUB
            })
            .when("/list/:id", {
                templateUrl: "view/list.html",
                controller: "controllerList",
                access_level:ACCESS_LEVELS.PUB
            })
            .when("/about", {
                templateUrl: "view/about.html",
                controller: "controllerAbout",
                access_level:ACCESS_LEVELS.PUB
            })
            .when("/contact", {
                templateUrl: "view/contact.html",
                controller: "controllerContact",
                access_level:ACCESS_LEVELS.PUB
            })
            .when("/login", {
                templateUrl: "view/login.html",
                controller: "controllerLogin",
                access_level:ACCESS_LEVELS.PUB
            })
            .when("/register", {
                templateUrl: "view/register.html",
                controller: "controllerRegister",
                access_level:ACCESS_LEVELS.PUB
            })
            .when("/uc_enter", {
                templateUrl: "view/uc_enter.html",
                controller: "controllerUcenter",
                access_level:ACCESS_LEVELS.USER
            })
            .otherwise({redirectTo: '/'})
    }])
    .run(function ($rootScope, $location,auth,cookieUtils,ajax) {
        auth.set(cookieUtils.get("auth"));

        $rootScope.title = "本地网站";
        $rootScope.keywords = "网站的关键词";
        $rootScope.description = "网站的描述";

        $rootScope.isActive = function (score) {
            return score == $location.path();
        };

        //判断是否登录
        $rootScope.isLogin = function(){
            return !auth.get();
        }

        //路由开始
        $rootScope.$on('$routeChangeStart', function (evt, next, current) {

            //boot菜单选择器
            if($(".navbar-toggle").attr('aria-expanded') == "true"){
                $(".navbar-toggle").click();
            }
            if(next.$$route.access_level == 2 && auth.get().length == 0){
                toast("请先登录!");
                $location.path("/login");
            }
        });

        //路由成功
        $rootScope.$on('$routeChangeSuccess', function (evt, next, previous) {

        });

        //路由错误
        $rootScope.$on('$routeChangeError', function (current, previous, rejection) {
            c('$routeChangeError')
            c(current)
            c(previous)
            c(rejection)
        });

        //登出
        $rootScope.loginOut = function(){
            ajax.get("/api/v1/loginOut",{})
                .success(function(data){
                    if(data.response_code == 1){
                        auth.del();
                        if(toast(data.response_err)){
                            $location.path("/");
                        }

                    }
                })
        };
    })
.factory("UserSerice",function($q,$http,ajax){
    var _url = '/api/v1/user/';

    return {
        get:function(id,param){
            var defer = $q.defer();
            $http.get(ajax.parseParam(_url + id,param))
                .success(function(data){
                    defer.resolve(data);
                })
                .error(function(data){
                    defer.reject(data);
                })
            return defer.promise;
        },
        save:function(param){
            var defer = $q.defer();
            $http.post(_url,param)
                .success(function(data){
                    defer.resolve(data);
                })
                .error(function(data){
                    defer.reject(data);
                })
            return defer.promise;
        },
        put:function(id,param){
            var defer = $q.defer();
            $http.put(_url + id,param)
                .success(function(data){
                    defer.resolve(data);
                })
                .error(function(data){
                    defer.reject(data);
                })
            return defer.promise;
        }

    }
})
//用户权限校验
.factory("auth", function (cookieUtils) {
    var auth = '';
    return {
        set: function (a) {
            auth = a;
            cookieUtils.set('auth',typeof a == "string" ? a : '');
        },
        get: function () {
            return auth;
        },
        del:function(){
            auth = '';
            cookieUtils.del('auth');
            cookieUtils.del('user_name');
            cookieUtils.del('user_pwd');
        }
    }
})

 

 

 

 

 

12
 
Copyright © 2008-2021 lanxinbase.com Rights Reserved. | 粤ICP备14086738号-3 |