使用AngularJS和routeparams的后退按钮循环

Question

Here's what I wish to achieve:

1. User is on url example.com/2
2. User goes to url example.com/2d <- this is not valid url
3. User is fowarded to example.com/2d/404_error
4. User clicks browser "back" button and lands on example.com/2

Here's what I have a problem with

4. User clicks browser "back" button and lands on example.com/2d
5. User is again automatically forwarded to example.com/2d/404_error

I have created infinite back button loop :(

In my app.config I have

.when('/:gameId/404_error', {
    templateUrl: 'views/page_not_found.html'
})

.when('/:gameId', {
    controller: 'game',
    templateUrl: 'views/gamePage.html'
})

It is called out by app.factory when data is not fetched

}, function(response) {
    // something went wrong
    $location.path("/" + id + "/404_error");
    return $q.reject(response.data);
});

I have tried the "otherwise" method, but using routeparams renders it useless.

You can test it out here:

http://vivule.ee/2 <- working url

http://vivule.ee/2d <- not working url

Answer 1

window.history.go(-2)

This method is pure javascipt you can try to use $window.history.go(-2) in angularjs

Good works!

Answer 2

Fixed it with ng-switch and ng-include

In the controller, when data is not loaded I added:

$scope.page_not_found = true;

And to the template I added:

<div ng-switch on="page_not_found">
   <div ng-if="page_not_found" ng-include="'views/page_not_found.html'"></div>
</div>

Everything happens in one .html template. I hide the main content and import the 404 page with ng-include, this solution seems to be faster as well.