Angular的run方法巧妙运用

た入场券 2022-08-21 01:25 155阅读 0赞

### 1.浏览器判断 ###

在angular做微信应用的时候，有时候我们也想把相同一份代码运行在非微信的浏览器上，这时候我们可以在angular的run上写点东西实现~  
例如asw.run函数里执行定义一个$rootScope.isWeiXinLogin的函数

xx.run(['$rootScope', '$route', '$window', '$location', 'Position', '$cookies', 'Request', '$cookieStore',
        function ($rootScope, $route, $window, $location, position, $cookies, request, $cookieStore) {
            //非微信的登陆
            $rootScope.isWeiXinLogin = function () {
                //判断是否微信登陆
                var ua = window.navigator.userAgent.toLowerCase();
                //console.log(ua); //mozilla/5.0 (iphone; cpu iphone os 9_1 like mac os x) applewebkit/601.1.46 (khtml, like gecko) version/9.0 mobile/13b143 safari/601.1
                if (ua.match(/MicroMessenger/i) == 'micromessenger') {
                    console.log("  是来自微信内置浏览器");
                    return true;
                } else {
                    console.log("不是来自微信内置浏览器");
                    return false;
                }
            };
        }
    ]);

这样它能在应用的其他部分之前提前被执行，然后根据$rootScope.isWeiXinLogin的返回我们可以在不同的视图或者控制器有效的进行判断是否为微信浏览器

angular.module('autumnswind').controller('OrderCtrl', ['$rootScope', '$scope', 'Request', '$cookies', '$window', '$routeParams', '$location', 'Tool',
        function ($rootScope, $scope, request, $cookies, $window, $routeParams, $location, tool) {
            if ($rootScope.isWeiXinLogin()) {
                // ...
            }
        }
    ]);

### 2.登陆判断 ###

在run里面写登陆判断是一种不错的方案，例如下面我写的这段，配合cookie和我上面的浏览器判断，当我加载页面的时候我就可以调用$rootScope.goLogin方案来判断是否这个路由所在的视图为登陆，如果有这个合法cookie就让它继续运行，不然则返回login页面进行登陆~

$rootScope.goLogin = function (replace) {
        if ($rootScope.isWeiXinLogin()) {
            if (!replace) {
                $cookieStore.remove('loginBack');
                delete $cookies.loginBack;
                $location.path('login');
            } else {
                $cookies.loginBack = $location.path();
                $location.path('login').replace();
            }
        } else {
            $cookieStore.remove('loginBack');
            delete $cookies.loginBack;
            $location.path('loginWebapp');
        }
    };

###    3.白名单设置 ###

曾经写过一个这样的函数来实现路由的参数判断，来设置白名单，那时候这个函数还放在全局变量里面~其实回头想想算是不大好的方法

后来改进了下面这个简单的例子，就可以不用用上面那句代码来实现了

$rootScope.$on('$routeChangeSuccess',
        function () {
            var route = window.location.href;
            if (route.indexOf('/hello/') != -1 && route.indexOf('/wscats/') != -1) {
                window.WscatsShareUrl = window.location.href;
            } else if (route.indexOf('#/index') != -1) {
                window.WscatsShareUrl = window.location.href;
            } else if (route.indexOf('#/aswscat/') != -1) {
                window.WscatsShareUrl = window.location.href;
        } else {
            //跳转下载页面
            window.WscatsShareUrl = '~eno~.cn';
        }
    );

上面我们根据路由发生的变化进行白名单的设置，复杂点的话可以运用一下正则，这样就能很好的过滤我们禁止的url，由于例子就不写这么复杂啦~

###    4.设置公共参数 ###

这个其实就不用写例子了，因为上面的例子也算是这个的一部分吧~  
后面有时间慢慢补充~