Angular判断在那个浏览器下打开的服务

[enoyao]

.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("PC"):"PC";
                }
            },
            debug: function(e){
                alert(e);
            }
        }
        return OrderFrom;
    }
])

在Angular里面写上以上的服务代码就可以在控制器中注入这个服务，以达到获取访问该单页面应用时所在的浏览器信息

angular.module('wscatApp').controller('exampleCtrl', ['$rootScope', '$scope','OrderFrom',
    function($rootScope, $scope, OrderFrom) {
    console.log(OrderFrom.from("debug"));
}])

如上面代码的示例一样，我们可以获取OrderFrom对象，得到以下信息

如图我们可以从versions里面得知我们是否Android或者IOS系统，是否移动端，是否iPhone等等的信息
console.log(OrderFrom.from("debug"));
当我们去调用它的时候，可以往里面传debug参数，方便我们在移动端调试的时候alert出必要的信息

当然我们也可以在PC端的控制台里面获取我们需要的结果