AngularJS中run方法的巧妙運用

更新時間：2017年01月04日 16:47:10 作者：秋風

前端技術(shù)的發(fā)展是如此之快，各種優(yōu)秀技術(shù)、優(yōu)秀框架的出現(xiàn)簡直讓人目不暇接，緊跟時代潮流，學習掌握新知識自然是不敢怠慢。下面這篇文章主要給大家介紹了AngularJS中run方法的巧妙運用,需要的朋友可以參考借鑒，下面來一起看看吧。

前言

AngularJS是google在維護，其在國外已經(jīng)十分火熱，可是國內(nèi)的使用情況卻有不小的差距，參考文獻/網(wǎng)絡文章也很匱乏。網(wǎng)上關(guān)于AngularJS中run方法的介紹也比較少，本文就主要總結(jié)了關(guān)于AngularJS中run方法的巧妙運用，感興趣的朋友們可以一起來學習學習。

一、瀏覽器判斷

在angular做微信應用的時候，有時候我們也想把相同一份代碼運行在非微信的瀏覽器上，這時候我們可以在angular的run上寫點東西實現(xiàn)~

例如asw.run函數(shù)里執(zhí)行定義一個$rootScope.isWeiXinLogin的函數(shù)

.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(" 是來自微信內(nèi)置瀏覽器");
     return true;
    } else {
     console.log("不是來自微信內(nèi)置瀏覽器");
     return false;
    }
   };
]);

這樣它能在應用的其他部分之前提前被執(zhí)行，然后根據(jù)$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和我上面的瀏覽器判斷，當我加載頁面的時候我就可以調(diào)用$rootScope.goLogin方案來判斷是否這個路由所在的視圖為登陸，如果有這個合法cookie就讓它繼續(xù)運行，不然則返回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');
    }
   };

三、白名單設(shè)置

曾經(jīng)寫過一個這樣的函數(shù)來實現(xiàn)路由的參數(shù)判斷，來設(shè)置白名單，那時候這個函數(shù)還放在全局變量里面~其實回頭想想算是不大好的方法

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;
};
//這個是根據(jù)路由name來決定進入那個parts
window.cats = getParam('AutumnsWind');

后來改進了下面這個簡單的例子，就可以不用用上面那句代碼來實現(xiàn)了

$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 {
       //跳轉(zhuǎn)下載頁面
       window.AutumnsWindShareUrl = '~autumns~.cn';
      }
);

上面我們根據(jù)路由發(fā)生的變化進行白名單的設(shè)置，復雜點的話可以運用一下正則，這樣就能很好的過濾我們禁止的url，由于例子就不寫這么復雜啦~

四、設(shè)置公共參數(shù)

這個其實就不用寫例子了，因為上面的例子也算是這個的一部分吧~

總結(jié)

以上就是關(guān)于Angular中run方法巧妙運用的全部內(nèi)容了，希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流。

您可能感興趣的文章: