AngularJS中run方法的巧妙運(yùn)用

更新時(shí)間：2017年01月04日 16:47:10 作者：秋風(fēng)

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

前言

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

一、瀏覽器判斷

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

例如asw.run函數(shù)里執(zhí)行定義一個(gè)$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(" 是來(lái)自微信內(nèi)置瀏覽器");
     return true;
    } else {
     console.log("不是來(lái)自微信內(nèi)置瀏覽器");
     return false;
    }
   };
]);

這樣它能在應(yīng)用的其他部分之前提前被執(zhí)行，然后根據(jù)$rootScope.isWeiXinLogin的返回我們可以在不同的視圖或者控制器有效的進(jìn)行判斷是否為微信瀏覽器

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里面寫(xiě)登陸判斷是一種不錯(cuò)的方案，例如下面我寫(xiě)的這段，配合cookie和我上面的瀏覽器判斷，當(dāng)我加載頁(yè)面的時(shí)候我就可以調(diào)用$rootScope.goLogin方案來(lái)判斷是否這個(gè)路由所在的視圖為登陸，如果有這個(gè)合法cookie就讓它繼續(xù)運(yùn)行，不然則返回login頁(yè)面進(jìn)行登陸~

$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)寫(xiě)過(guò)一個(gè)這樣的函數(shù)來(lái)實(shí)現(xiàn)路由的參數(shù)判斷，來(lái)設(shè)置白名單，那時(shí)候這個(gè)函數(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;
};
//這個(gè)是根據(jù)路由name來(lái)決定進(jìn)入那個(gè)parts
window.cats = getParam('AutumnsWind');

后來(lái)改進(jìn)了下面這個(gè)簡(jiǎn)單的例子，就可以不用用上面那句代碼來(lái)實(shí)現(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)下載頁(yè)面
       window.AutumnsWindShareUrl = '~autumns~.cn';
      }
);

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

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

這個(gè)其實(shí)就不用寫(xiě)例子了，因?yàn)樯厦娴睦右菜闶沁@個(gè)的一部分吧~

總結(jié)

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

您可能感興趣的文章: