Question

我正在转换大型服务器渲染的应用程序以使用Angular。由于尺寸的原因，我们一次只做一点。在此转换期间，应用程序的一部分将使用Angular而部分不会。这意味着路由有时会在Angular应用程序中进行路由，有时它需要从旧世界过渡到新世界（简单）或从新世界过渡到旧世界（更难）。

理想情况下，我想将Angular应用程序（新世界）中的一些页面转换专门路由到适当的控制器，但是任何其他页面转换应该只是获取新的HTML页面（旧世界）。

我似乎无法弄清楚如何做到这一点。我想我需要使用routeProvider和when / otherwise，但是我找不到很多有用的文档。

Answer 1

您不能将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;
 })

Answer 2

正如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");
    });
});

路由到Angular中的非Angular页面

2 个答案: