首页 > 代码库 > angular.run 妙用

angular.run 妙用

2024-10-31 23:21:39   211人阅读

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

.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的返回我们可以在不同的视图或者控制器有效的进行判断是否为微信浏览器

  1. angular.module(‘autumnswind‘).controller(‘OrderCtrl‘, [‘$rootScope‘, ‘$scope‘, ‘Request‘, ‘$cookies‘, ‘$window‘, ‘$routeParams‘, ‘$location‘, ‘Tool‘,  
  2.     function($rootScope, $scope, request, $cookies, $window, $routeParams, $location, tool) {   
  3. if ($rootScope.isWeiXinLogin()) {  
  4.                     ...  
  5.                 }  
  6.             }  
  7. ]);  

　　**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.白名单设置**

 

var getParam = function(name) {  
    var search = document.location.search;  
    var pattern = new RegExp("[?&]" + name + "\=([^&]+)", "g");  
    var matcher = pattern.exec(search);  
    var items = null;  
    if (null != matcher) {  
        try {  
            items = decodeURIComponent(decodeURIComponent(matcher[1]));  
        } catch (e) {  
            try {  
                items = decodeURIComponent(matcher[1]);  
            } catch (e) {  
                items = matcher[1];  
            }  
        }  
    }  
    return items;  
};  
//这个是根据路由name来决定进入那个parts  
window.cats = getParam(‘AutumnsWind‘);

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

$rootScope.$on(‘$routeChangeSuccess‘,  
                    function() {  
                        var route = window.location.href;  
                        if (route.indexOf(‘/hello/‘) != -1 && route.indexOf(‘/autumnswind/‘) != -1) {  
                            window.AutumnsWindShareUrl = window.location.href;  
                        } else if (route.indexOf(‘#/index‘) != -1) {  
                            window.AutumnsWindShareUrl = window.location.href;  
                        } else if (route.indexOf(‘#/asw‘scat/‘) != -1) {  
                            window.AutumnsWindShareUrl = window.location.href;  
                        } else {  
                            //跳转下载页面  
                            window.AutumnsWindShareUrl = ‘~autumns~.cn‘;  
                        }  
);

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


**4.设置公共参数**
这个其实就不用写例子了，因为上面的例子也算是这个的一部分吧~
后面有时间慢慢补充~

状态改变事件

$scope.$on(‘$stateChangeStart‘, 
function(event, toState, toParams, fromState, fromParams), {
  // 如果需要阻止事件的完成

event.preventDefault();
});
我先说说这里面的这些参数
event：该事件的基本信息
toState:我们可以得到当前路由的信息，比如路由名称，url,视图的控制器，模板路径等等
toParams:我们可以得到当前路由的参数
fromState：我们可以得到上一个路由的信息，比如路由名称，url,视图的控制器，模板路径等等


fromParams：我们可以得到上一个路由的参数


 


可以触发的事件包括：


stateChangeStart


当状态改变开始的时候被触发


$stateChangeSuccess


当状态改变成功后被触发


$stateChangeError


当状态改变遇到错误时被触发，错误通常是目标无法载入，需要预载入的数据无法被载入等


 


 


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




var ydCreditApp = angular
    .module(‘ydCreditApp‘, [
        ‘ngAnimate‘,
        ‘ngCookies‘,
        ‘ngResource‘,
        ‘ngSanitize‘,
        ‘ngTouch‘,
        ‘ui.router‘,
        ‘ui.bootstrap‘,
        ‘datatablesDirectives‘,
        ‘ngTable‘,
        ‘ncy-angular-breadcrumb‘,
        // ‘angularFileUpload‘,
        // ‘smart-table‘,
        ‘ngFileUpload‘,
        ‘MessageCenterModule‘,
        ‘angular-loading-bar‘,
        ‘toggle-switch‘,
        ‘invalidModule‘
    ])
    .run(
        [‘$rootScope‘, ‘$state‘, ‘$stateParams‘, ‘AppSession‘,
            function($rootScope, $state, $stateParams, AppSession) {
                $rootScope.$state = $state;
                console.log($rootScope.$state)
                $rootScope.$stateParams = $stateParams;

                $rootScope.$on(‘$stateChangeStart‘, function(event, toState, toParams, fromState, fromParams) {
                    $state.previous = fromState;
                    $state.previousParams = fromParams;
                    if (toState.data.requiredLogin && !AppSession.getLogin()) {
                        $state.go(‘loginByMobile‘, {}, {
                            reload: true
                        });
                        event.preventDefault();
                    }
                });

                $rootScope.$on("$stateChangeSuccess",  function(event, toState, toParams, fromState, fromParams) {
                    $rootScope.previousState_name = fromState.name;
                    $rootScope.previousState_params = fromParams;
                });

            }
        ]
    ).directive(‘repeatFinish‘,function(){
        return {
            link: function($scope,element,attr){
                if($scope.$last === true){
                    //为了防止页面中的值还没有渲染出来，所以添加Timeout来解决
                    setTimeout(function(){ $scope.$eval( attr.repeatFinish );},1000);
                }
            }
        };
    }).config([‘cfpLoadingBarProvider‘, function (cfpLoadingBarProvider) {
        cfpLoadingBarProvider.latencyThreshold = 0;
        cfpLoadingBarProvider.spinnerTemplate = ‘<div class="loading-bar-background"><div class="center" id="loading-bar-spinner"><div class="padding"></div><div class="spinner-icon"></div><div class="text">正在执行中，请稍后......</div></div>‘;
    }])
    .config(
        [‘$stateProvider‘, ‘$urlRouterProvider‘, ‘$breadcrumbProvider‘, ‘$httpProvider‘,
            function($stateProvider, $urlRouterProvider, $breadcrumbProvider, $httpProvider) {
                $httpProvider.interceptors.push(‘TokenInterceptor‘);
                // if(!IsPC){
                //   alert("请在PC端登录！");
                //   return;
                // }


                $urlRouterProvider.otherwise(‘/‘);
                $stateProvider
                    .state(‘loginByMobile‘, {
                        url: ‘/‘,
                        templateUrl: ‘views/login/loginByMobile.html‘,
                        controller: ‘loginCtrl‘,
                        data: {
                            requiredLogin: false
                        }
                    })





　　
angular.run 妙用






























        

            
                
                  
                
                

                    联系

                    我们