Routing to non-Angular pages within Angular

Question

I am converting a large server rendered app to use Angular. Because of the size, we are doing it a bit at a time. During this conversion period, part of the app will use Angular and part will not. This means that routing sometimes will route within the Angular app and sometimes it will need to transition from old world to new world (easy) or new world to old world (harder).

Ideally, I would like to specifically route some page transitions within the Angular app (new world) to the proper controllers but then any other page transitions should just fetch new HTML pages (old world).

I can't seem to figure out how to do this. I think I need to use the routeProvider and when / otherwise, but there isn't a lot of documentation that I found which is helpful.

Answer 1

You can't use routeProvider for the old world, since angular routes only direct you within the actual same page.

You could make a placeholder angular route for each legacy route, then in the controller, inject $window and do something like:

$window.location.href = destinationUrl;

Something like: (go to the old world on logout)

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

});

Vice versa, to go back to the angular world, just use a normal link to your angular route:

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

If you want a catch-all route to redirect to the outside, you can do the following:

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

Answer 2

As triggerNZ said, you can always have a controller redirect unhandled routes to the outside. Here is the HTML and Javascript showing how to do it.

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