2013-06-26 93 views
5

我正在研究一個Django應用,它在一些頁面中大量使用Angular,例如, at domain.com/myAngularApp使用角度路由和雙向路由

在角度頁面內,我使用Angular路由在該頁面內的不同視圖/狀態之間進行導航。然而,在整個網站上有導航鏈接,需要導致Django的往返請求。但是,所有頁面都包含相同的已編譯的JavaScript文件,其中包含Angular路由聲明。

所以我的問題是:如何讓Angular管理自己的路線,並在位置發生變化時(主要通過單擊頁面上的鏈接)轉到未明確指定的路徑告訴自己,即從域中的不同子目錄。

我的路由聲明看起來是這樣的:

myApp.config(function($locationProvider, $routeProvider) { 
    $locationProvider.html5Mode(true); 
    $routeProvider.when('/myAngularApp/', { 
    templateURL: 'template1.html' 
    }); 
    $routeProvider.when('/myAngularApp/stuff', { 
    templateURL: 'template12.html' 
    }); 
    $routeProvider.otherwise({redirectTo: <not sure what to do here...> }); 
}) 

我已經試過類似:

$routeProvider.otherwise({redirectTo: function(a1,r,a3){ window.location.href = r }}) 

但是,這使頁面刷新無休止地在任何非匹配的路由。

將其他語句排除在外似乎使直接訪問時不能使用不匹配的路徑離開頁面......不明白爲什麼?

它必須有可能做我不想要的東西嗎?

+0

你有沒有找到任何解決方案...即使我有同樣的問題。告訴我。謝謝:) –

+0

發現我可以通過減少dom中Angular應用程序的範圍來部分解決問題,以排除全局導航鏈接,儘管我正在編寫自己的非貪婪路由服務:/ – Nat

回答

4

我想我可能找到了解決方案。我正在做一個類似的事情,一個多角度的網站,它的一些頁面使用角度。這是我在做什麼

var app = angular.module('appname', ['ui.bootstrap', 'ui.autocomplete']) 
.config(['$locationProvider', '$routeProvider', function($locationProvider, $routeProvider) { 
    $locationProvider.html5Mode(true); 
    $locationProvider.hashPrefix('!'); 
}]) 
.run(function($rootScope, $location) { 
    var redirected = false; 
    $rootScope.$on('$locationChangeStart', function(event, nextLocation, currentLocation) { 
     if(!redirected && $location.path() !== '/current-url') { 
      redirected = true; 
      event.preventDefault(); 
      window.location = $location.path(); 
     } 
    }); 
}); 

所以我必須接下來的工作是如何傳遞當前url路徑。我想到的一種方法是使用ng-init在視圖中設置數據(我使用express.js,所以我使用Jade)。或者可能在運行函數中抓取初始路徑並進行測試。

event.preventDefault()用於阻止將額外的項目添加到瀏覽器歷史記錄中。在我這樣做之前,我必須回擊兩次才能回到角度頁面。

注意這還沒有用IE8測試過。我現在要做,看看它如何展示。

更新好吧我剛剛在IE8中測試了這一點,我陷入了重定向循環。我已經更新了代碼以擁有一個簡單的變量來檢查我們是否重定向。似乎工作。我很想知道更漂亮的方式。