AngularJS中run方法的巧妙运用  更新时间:2017年01月04日 16:47:10   作者:秋风   前端技术的发展是如此之快,各种优秀技术、优秀框架的出现简直让人目不暇接,紧跟时代潮流,学习掌握新知识自然是不敢怠慢。下面这篇文章主要给大家介绍了AngularJS中run方法的巧妙运用,需要的朋友可以参考借鉴,下面来一起看看吧。 前言 AngularJS是google在维护,其在国外已经十分火热,可是国内的使用情况却有不小的差距,参考文献/网络文章也很匮乏。网上关于AngularJS中run方法的介绍也比较少,本文就主要总结了关于AngularJS中run方法的巧妙运用,感兴趣的朋友们可以一起来学习学习。 一、浏览器判断 在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的返回我们可以在不同的视图或者控制器有效的进行判断是否为微信浏览器 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()) { … } } ]); 二、登陆判断 在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’); } }; 三、白名单设置 曾经写过一个这样的函数来实现路由的参数判断,来设置白名单,那时候这个函数还放在全局变量里面~其实回头想想算是不大好的方法 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,由于例子就不写这么复杂啦~ 四、设置公共参数 这个其实就不用写例子了,因为上面的例子也算是这个的一部分吧~ 总结 以上就是关于Angular中run方法巧妙运用的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。 您可能感兴趣的文章: angularJS中$apply()方法详解 使用AngularJS来实现HTML页面嵌套的方法 angularjs 处理多个异步请求方法汇总 在AngularJS中使用AJAX的方法 使用AngularJS处理单选框和复选框的简单方法 AngularJS中取消对HTML片段转义的方法例子 Jquery和angularjs获取check框选中的值的方法汇总 angularJS 中$scope方法使用指南 简介AngularJS中使用factory和service的方法 AngularJS Module方法详解 angularjs run 相关文章 Angular 4 依赖注入学习教程之FactoryProvider的使用(四) 这篇文章主要给大家介绍了关于Angular 4 依赖注入之FactoryProvider使用的相关资料,文中介绍的非常详细,对大家学习或者使用Angular4具有一定的参考学习价值,需要的朋友们下面来一起看看吧。 2017-06-06 Angular1.x自定义指令实例详解 这篇文章主要介绍了Angular1.x自定义指令,结合实例形式分析了Angular1.x自定义指令的实现与使用方法,以及相关操作技巧与注意事项,需要的朋友可以参考下 2017-03-03 Angular-Ui-Router+ocLazyLoad动态加载脚本示例 本篇文章主要介绍了Angular-Ui-Router+ocLazyLoad动态加载脚本示例,可以提高加载速度,使用户体验更好,有兴趣的可以了解一下。 2017-03-03 详解使用angular的HttpClient搭配rxjs 本篇文章主要介绍了详解使用angular的HttpClient搭配rxjs ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-09-09 AngularJS初始化过程分析(引导程序) 这篇文章主要介绍了AngularJS初始化过程分析(引导程序),这一节解释了AngularJS初始化的过程,以及需要的时候你该如何修改AngularJS的初始化,需要的朋友可以参考下 2014-12-12 AngularJS中的DOM操作用法分析 这篇文章主要介绍了AngularJS中的DOM操作,较为详细的分析了AngularJS针对DOM操作的原理、实现技巧与相关注意事项,需要的朋友可以参考下 2016-11-11 AngularJS ionic手势事件的使用总结 本篇文章主要介绍了AngularJS手势事件的使用总结,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-08-08 AngularJs点击状态值改变背景色的实例 下面小编就为大家分享一篇AngularJs点击状态值改变背景色的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 2017-12-12 angular十大常见问题 本文主要介绍了angular十大常见问题,具有很好的参考价值。下面跟着小编一起来看下吧 2017-03-03 AngularJS constant和value区别详解 angularJS可以通过constant(name,value)和value(name,value)对于创建服务也是很重要的。他们之间有什么不同呢?今天小编给大家分享AngularJS constant和value区别详解,需要的朋友参考下 2017-02-02 最新评论

前言

AngularJS是google在维护,其在国外已经十分火热,可是国内的使用情况却有不小的差距,参考文献/网络文章也很匮乏。网上关于AngularJS中run方法的介绍也比较少,本文就主要总结了关于AngularJS中run方法的巧妙运用,感兴趣的朋友们可以一起来学习学习。

一、浏览器判断

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

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()) {
     ...
    }
   }
]);

二、登陆判断

在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');
    }
   };

三、白名单设置

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

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,由于例子就不写这么复杂啦~

四、设置公共参数

这个其实就不用写例子了,因为上面的例子也算是这个的一部分吧~

总结

以上就是关于Angular中run方法巧妙运用的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

您可能感兴趣的文章:

  • angularJS中$apply()方法详解
  • 使用AngularJS来实现HTML页面嵌套的方法
  • angularjs 处理多个异步请求方法汇总
  • 在AngularJS中使用AJAX的方法
  • 使用AngularJS处理单选框和复选框的简单方法
  • AngularJS中取消对HTML片段转义的方法例子
  • Jquery和angularjs获取check框选中的值的方法汇总
  • angularJS 中$scope方法使用指南
  • 简介AngularJS中使用factory和service的方法
  • AngularJS Module方法详解
张贴在3