Ui.Router if $state not found go to url instead

Question

A summary on the platform: It is a wordpress backend combined with AngularJS frontend running ui.router, has html5 mode turned on and base href="/" since the stack sites in the root of the site.

The issue is the following:

1) First off, before when otherwise("/") was enabled if the state was not found (such as when a user clicked to go to a wordpress page or anything else that was not defined as a state) then the app would redirect to the main page or "/"; 2) After taking that off everything seemed fine since we were allowed to go into non-state pages by accessing the url directly such as localhost/post/blah, but none of the links work anymore. What we mean is that neither ui-sref state links, nor regular a href="/whatever/whatever" work. The window address bar in the browser changes to the appropriate link (or state) when they are clicked but nothing else happens.

What we are trying to do:

Basically have the links work as they are initially intended to be, if a link finds a state then activate the state, if not, then go to the link that was intended.

We have tried a variety of solutions that we have googled for and searched here but we can't seem to find the fix. Most recently we had:

$urlRouterProvider.otherwise(function() {
        window.location.href = 'localhost'+window.location.pathname;
    });

// This ends in an endless loop of page reloads as soon as the window opens to the page

We were trying to play off:

$urlRouterProvider.otherwise(function() { window.location.href = 'http://google.com' });

//We found this code on here which would redirect to another page and this worked but still have the issue from the beginning. So assuming this, we think the solution would be that when no state is found then the above function fires with the appropriate URL from the link or address bar change or whatever. So, any suggestions?

Answer 1

For those none-state URL, use

<a href="/link" target="_self">link</a>

Answer 2

I am using "angular-ui-router": "0.2.18" and the following code works perfectly for me.

app.config(['$stateProvider', '$urlRouterProvider', 

function($stateProvider, $urlRouterProvider) {
    "use strict";

    $stateProvider.state('page1', {
        url: "/page1",
        templateUrl: "page1/page1.tpl.html",
        controller: 'Page1Controller'

    }).state('page2', {
        url: "/page2",
        templateUrl: "page2/page2.tpl.html",
        controller: "Page2Controller"

    }).state('error', {
        url: "/error",
        templateUrl: "error/error.tpl.html",
        controller: "ErrorController"
    });

    $urlRouterProvider.otherwise('/error');

});

If you want to fall out of the Angular context and make a hard redirect to another website, you can create a redirect call in the error state controller.

app.config(['$stateProvider', '$urlRouterProvider', 

function($stateProvider, $urlRouterProvider) {
    "use strict";

    $stateProvider.state('page1', {
        url: "/page1",
        templateUrl: "page1/page1.tpl.html",
        controller: 'Page1Controller'

    }).state('page2', {
        url: "/page2",
        templateUrl: "page2/page2.tpl.html",
        controller: "Page2Controller"

    }).state('error', {
        url: "/error",
        controller: "ErrorController"
    });

    $urlRouterProvider.otherwise('/error');

}]);


app.controller('ErrorController', ['$window',

function($window) {
    "use strict";

    $window.location.href = "http://www.google.com";
}]);