4

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

Alan2
  • 23,493
  • 79
  • 256
  • 450

2 Answers2

4

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)

Community
  • 1
  • 1
Radim Köhler
  • 122,561
  • 47
  • 239
  • 335
  • Thanks. In my case I'm already using the latest router so I think I will need to choose the onChangeConfig option. Can you add in an example of how I could use that for my particular needs where I want to go to the state represented with /Auth/confirmation. Thanks – Alan2 Jan 15 '15 at 11:33
  • Also just to confirm. What would the order by of the app.config(stateConfig); app.config(onChangeConfig); Which one should come first. By the way did you get any ideas as to if the .when that does not going to work will be fixed in the next release or in the latest commits. Thanks – Alan2 Jan 15 '15 at 11:36
  • 1
    The answer should be 1) first declare when, then states and finally the onChange 2) here is my bug report and also response by UI-Router team: https://github.com/angular-ui/ui-router/issues/1584 – Radim Köhler Jan 15 '15 at 11:39
  • 1
    Here is the plunker with your example http://plnkr.co/edit/4w7Tl18c8jjd5PvARhpm?p=preview. It should show in action all the stuff and also give all the answers ;) good luck with UI-Router *NOTES: confiramtion is the default, when app starts. Also when going to auth - child is used. Any unmapped url ends there as *well... – Radim Köhler Jan 15 '15 at 11:47
1

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.

JB Nizet
  • 678,734
  • 91
  • 1,224
  • 1,255
  • thanks but the problem is that I will be sending out an email asking people to click on something like this: http://localhost:2757/Auth/confirmation I think I know a way to config the server to make that go to the index.html but then how can I make it automatically go to the ui-router /Auth/Confirmation state? – Alan2 Jan 15 '15 at 08:55
  • You don't have anything to do. The router does that automatically: as soon as the application is started, it analyzes the location and goes to the corresponding state. – JB Nizet Jan 15 '15 at 09:13
  • I updated my question with some things that I found. I was thinking that adding after the index.html might work but it appears not to. – Alan2 Jan 15 '15 at 09:19
  • So, you haven't done anything of what I told you to do in my answer? The URL should be http://localhost:2757/Auth/confirmation. That's the URL you should send by email to your customers. The server, when receiving a request to http://localhost:2757/Auth/confirmation, must return the content of the index.html file. Not redirect to any other URL. – JB Nizet Jan 15 '15 at 10:56