AngularJS中run方法的巧妙运用


Posted in Javascript onJanuary 04, 2017

前言

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方法巧妙运用的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
jQuery 对Select的操作备忘记录
Jul 04 Javascript
JS动态添加option和删除option(附实例代码)
Apr 01 Javascript
js为数字添加逗号并格式化数字的代码
Aug 23 Javascript
JavaScript实现的一个计算数字步数的算法分享
Dec 06 Javascript
简要了解jQuery移动web开发的响应式布局设计
Dec 04 Javascript
js格式化输入框内金额、银行卡号
Feb 01 Javascript
Bootstrap表单布局
Jul 19 Javascript
利用Js+Css实现折纸动态导航效果实例源码
Jan 25 Javascript
微信小程序视图容器(swiper)组件创建轮播图
Jun 19 Javascript
JS实现获取当前所在周的周六、周日示例分析
May 11 Javascript
jQuery实现html可联动的百分比进度条
Mar 26 jQuery
vue router-link 默认a标签去除下划线的实现
Nov 06 Javascript
JavaScript中的 attribute 和 jQuery中的 attr 方法浅析
Jan 04 #Javascript
快速实现JS图片懒加载(可视区域加载)示例代码
Jan 04 #Javascript
基于jQuery实现选项卡效果
Jan 04 #Javascript
jQuery和CSS仿京东仿淘宝列表导航菜单
Jan 04 #Javascript
JavaScript原生编写《飞机大战坦克》游戏完整实例
Jan 04 #Javascript
jQuery实现联动下拉列表查询框
Jan 04 #Javascript
JavaScript中String对象的方法介绍
Jan 04 #Javascript
You might like
网页的分页下标生成代码(PHP后端方法)
2016/02/03 PHP
PHP接口类(interface)的定义、特点和应用示例
2020/05/18 PHP
one.php 多项目、函数库、类库 统一为一个版本的方法
2020/08/24 PHP
Javascript 学习书 推荐
2009/06/13 Javascript
实现超用户体验 table排序javascript实现代码
2009/06/22 Javascript
JavaScript 学习笔记(十二) dom
2010/01/21 Javascript
JQuery Study Notes 学习笔记(一)
2010/08/04 Javascript
jquery动态添加删除div 具体实现
2013/07/20 Javascript
JS+DIV实现鼠标划过切换层效果的方法
2015/05/25 Javascript
JavaScript实现的背景自动变色代码
2015/10/17 Javascript
BootStrap文件上传样式超好看【持续更新】
2016/05/10 Javascript
AngularJS实现用户登录状态判断的方法(Model添加拦截过滤器,路由增加限制)
2016/12/12 Javascript
详解微信小程序开发—你期待的分享功能来了,微信小程序序新增5大功能
2016/12/23 Javascript
如何在Angular2中使用jQuery及其插件的方法
2017/02/09 Javascript
纯JS实现轮播图
2017/02/22 Javascript
基于JS实现移动端向左滑动出现删除按钮功能
2017/02/22 Javascript
js轮播图透明度切换(带上下页和底部圆点切换)
2017/04/27 Javascript
js数组实现权重概率分配
2017/09/12 Javascript
JS实现留言板功能[楼层效果展示]
2017/12/27 Javascript
Vue开发之封装上传文件组件与用法示例
2019/04/25 Javascript
vue-router的两种模式的区别
2019/05/30 Javascript
微信小程序实现手势滑动效果
2019/08/26 Javascript
解决vue中el-tab-pane切换的问题
2020/07/19 Javascript
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
2020/08/03 Javascript
JavaScript实现移动端拖动元素
2020/11/24 Javascript
Python实现全角半角转换的方法
2014/08/18 Python
跟老齐学Python之传说中的函数编写条规
2014/10/11 Python
Django 生成登陆验证码代码分享
2017/12/12 Python
python读取.mat文件的数据及实例代码
2019/07/12 Python
python中对_init_的理解及实例解析
2019/10/11 Python
python批量处理txt文件的实例代码
2020/01/13 Python
通过canvas转换颜色为RGBA格式及性能问题的解决
2019/11/22 HTML / CSS
新闻系毕业生推荐信
2013/11/16 职场文书
毕业设计计划书
2014/01/09 职场文书
2015年元旦联欢晚会活动总结
2014/11/28 职场文书
假期读书倡议书3篇
2019/08/19 职场文书