在Angular中路由到非Angular頁面

Question

我正在將大型服務器呈現的應用程序轉換爲使用Angular。由於尺寸大小，我們一次只做一點。在此轉換期間，部分應用會使用Angular，部分則不會。這意味着路由有時會在Angular應用中路由，有時它需要從舊世界轉換到新世界（簡單）或新世界轉換到舊世界（更難）。在理想情況下，我想專門將Angular應用程序（新世界）中的一些頁面轉換路由到適當的控制器，但是其他任何頁面轉換都應該只是獲取新的HTML頁面（舊世界）。

我似乎無法弄清楚如何做到這一點。我想我需要使用routeProvider和when/otherwise，但是我沒有找到很多有用的文檔。

Answer 1

正如triggerNZ說，你總是可以有一個控制器重定向未處理的路線到外面。這裏是HTML和Javascript顯示如何做到這一點。

HTML

<div ng-app="myApp"> 
    <script type="text/ng-template" id="this.html"> 
     This Page. 
    </script> 
    <script type="text/ng-template" id="that.html"> 
     That Page. 
    </script> 
    <div> 
     <ul> 
      <li><a href="/this">This</a></li> 
      <li><a href="/that">That</a></li> 
      <li><a href="/other">Other</a></li> 
     </ul> 
     <ng-view></ng-view> 
    </div> 
</div> 

的Javascript

var app = angular.module("myApp", ['ngRoute']); 

app.config(function ($routeProvider, $locationProvider) { 
    $routeProvider.when('/this', { 
     templateUrl: 'this.html' 
    }).when('/that', { 
     templateUrl: 'that.html' 
    }).otherwise({ 
     template: "<div></div>", 
     controller: function ($window, $location, $rootScope) { 
      if (!$rootScope.isInitialLoad) { 
       $window.location.href = $location.absUrl(); 
      } 
     } 
    }); 

    $locationProvider.html5Mode(true); 
}); 

app.run(function ($rootScope) { 
    $rootScope.$on('$routeChangeSuccess', function() { 
     $rootScope.isInitialLoad = (typeof $rootScope.isInitialLoad === "undefined"); 
    }); 
}); 

Answer 2

您不能在舊世界使用routeProvider，因爲角度路線只能引導您在實際的同一頁面內。

你可以做一個佔位符角路線每個遺留的路線，然後在控制器中，注入$window和做類似：

$window.location.href = destinationUrl; 

喜歡的東西：（去舊世界上註銷）

app.controller('LogoutCtrl', function ($scope, $window) { 
    var destinationUrl = 'https://mywebsite.com/'; 
    $window.location.href = destinationUrl; 

}); 

反之亦然，回到角度的世界，只是使用普通的鏈接到你的角度路線：

<a href="angular-app/#/my/route">Link</a> 

如果你想有一個包羅萬象的路由重定向到外面，你可以做到以下幾點：

otherwise({ 
    controller: 'NotFoundCtrl' 
    }); 
... 
app.controller('NotFoundCtrl', function($scope, $location, $window) { 
    var path = $location.path(); 
    $window.location.href="http://test.com" + path; 
})