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方法巧妙运用的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。
下一篇: CDR怎么将圆角变成直角?
推荐阅读
-
ThinkPHP中SHOW_RUN_TIME不能正常显示运行时间的解决方法 原创,thinkphprun_PHP教程
-
Java中启动线程start和run的两种方法
-
详解在Java程序中运用Redis缓存对象的方法
-
iOS应用设计模式开发中对简单工厂和工厂方法模式的运用
-
ThinkPHP中SHOW_RUN_TIME不能正常显示运行时间的解决方法 原创
-
Angularjs Ng_repeat中实现复选框选中并显示不同的样式方法
-
ios设备中angularjs无法改变页面title的解决方法
-
巧妙运用v-model实现父子组件传值的方法示例
-
浅谈angularJS2中的界面跳转方法
-
浅谈AngularJS中ng-class的使用方法