How can I go directly to a state with ui-router wi

Question

I have an AngularJS application that is using ui-router. All is working okay but I would like to have a user registration confirmation screen accessed like this:

  http://localhost:2757/Auth/confirmation

In my present configuration when I open a browser page with this link it does not look for the index.html and does not go to the /Auth/confirmation state. I understand why this happens but I do not know how to solve the problem.

Can someone give me some advice on how / if I can make a link that will get me to the /Auth/confirmation directly.

All I can think of is perhaps something like this:

  http://localhost:2757/index.html?load=AuthConfirm

and then somehow have a check that detects a new state to transition to once the index.html is loaded up.

Here is my AppConfig file:

var auth = {
    name: 'auth',
    url: '/Auth',
    views: {
        'root': {
            templateUrl: 'app/auth/partials/home.html'
        }

    }
};

var authContent = {
    name: 'auth.content',
    url: '/:content',
    views: {
        'root': {
            templateUrl: 'app/exams/partials/home.html'
        },
        'content': {
            templateUrl: function (stateParams) {
                return 'app/auth/partials/' + stateParams.content + '.html'
            }
        }
    }
}

Here's something I tried:

http://localhost:2757/index.html << takes me to my main index page

http://localhost:2757/index.html/Auth << returns page not found

http://localhost:2757/index.html/Auth/register << returns page not found

Answer 1

I would say that what we need here is - to let the index.html be laoded - as a SPA (Single page application). Then we will profit from the features built in in the UI-Router:

.when() for redirection

Parameters:

what String | RegExp | UrlMatcher The incoming path that you want to redirect.
handler String | Function The path you want to redirect your user to.

handler as String

If handler is a string, it is treated as a redirect, and is interpolated according to the syntax of match (i.e. like String.replace() for RegExp, or like a UrlMatcher pattern otherwise).

app.config(function($urlRouterProvider){
    // when there is an empty route, redirect to /index   
    $urlRouterProvider.when('', '/index');

    // You can also use regex for the match parameter
    $urlRouterProvider.when(/aspx/i, '/index');
})

.otherwise() for invalid routes

Parameters:

path String | Function The url path you want to redirect to or a function rule that returns the url path. The function version is passed two params: $injector and $location.

app.config(function($urlRouterProvider){
    // if the path doesn't match any of the urls you configured
    // otherwise will take care of routing the user to the specified url
    $urlRouterProvider.otherwise('/index');

    // Example of using function rule as param
    $urlRouterProvider.otherwise(function($injector, $location){
        ... some advanced code...
    });
})

How to use the .when() properly (e.g. order of declaration) please check also here (with more details and examples)

• Angular UI-Router $urlRouterProvider .when not working *anymore*
• Angular UI-Router $urlRouterProvider .when not working when I click

Answer 2

It's quite simple actually, but requires work at server-side: the server must be configured to serve the index.html page for the path /Auth/confirmation (and for all the other bookmarkable URLs of your app).

Once that is true, a user going to /Auth/confirmation will thus download the index.html file, which will start the angular application. The ui-router module will analyze the location, load the corresponding state, and display the corresponding view.