Angular UI-Router sending root url to 404

Question

I am having an infuriating issue regarding ui-router. Everything works as I want, where all bad URLs are sent to the 404 state. However, even though my default state is correctly rendered when the url is /#/, the url of / is redirected to /404/. How can I server the default state to both / and /#/?

app.js

MyApp.config( function ($stateProvider, $urlRouterProvider) {

// For any unmatched url, send to 404
$urlRouterProvider.otherwise("/404/");

$stateProvider
    // Home  (default)
    .state('default', {
        url: '/',
        resolve: {
            ...
        },
   }
});

Community · Accepted Answer · 2017-05-23 12:00:10Z

11

I think this will accomplish your needs -

MyApp.config(function($stateProvider, $urlRouterProvider) {
    // the known route
    $urlRouterProvider.when('', '/');

    // For any unmatched url, send to 404
    $urlRouterProvider.otherwise('/404');

    $stateProvider
        // Home  (default)
        .state('default', {
            url: '/',
            resolve: {
                // ...
            }
            // ....
        });
});

I refered to this post. You may need to use a regular expression to handle routes with data.

Instead of the # in your URL you can use a query string too and grab it via $stateParams in a state.

Here is how you can do that -

  // ....

  $stateProvider

    .state('default', {
        url: '/?data',
        templateUrl: 'templates/index.html',
        controller: 'defaultCtrl'
    })

And then you can use this below to go to home with data -

var toStateData = {
    key1: 'value1',
    key2: 'value2'
}

$state.go('default', {data: JSON.stringify(toStateData)});

You don't have to stringify the data in $stateParams but this will allow more options with one parameter. In the defaultCtrl controller you can get the passed query string like this -

var stateData = JSON.parse($stateParams.data);
var key1 = stateData.key1;
// ....

edited May 23, 2017 at 12:00

CommunityBot

11 silver badge

answered May 3, 2014 at 0:29

Ross

3,3301 gold badge22 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Darwin Tech Over a year ago

Hey, thanks for taking me in the right direction - didn't realise that .when provides an alias. However, my use case is actually the reverse you have posted. When the base / url is found, I need it to alias to /#/ ('' and '/' in the state router). If you adjust your answer, I'll happily accept ;)

Darwin Tech Over a year ago

This what I added: $urlRouterProvider.when('', '/');

Francesco Belladonna · Accepted Answer · 2014-05-04 13:47:42Z

2

I wanted to do this only with states, so no url provider involved. I found the following solution which I think is good:

(sorry it's coffeescript)

  $stateProvider.
    state('base.public.notFound',
      url:         '^*path'
      templateUrl: 'views/layouts/404.html'
    )

Put this as the last state and you are done!

answered May 4, 2014 at 13:47

Francesco Belladonna

11.8k14 gold badges83 silver badges152 bronze badges

2 Comments

Darwin Tech Over a year ago

I would like to note, that for whatever reason, this did not work for me.

Francesco Belladonna Over a year ago

I don't know your code, but with this one, you should not use the .otherwise or such, only stateprovider.

Collectives™ on Stack Overflow

Angular UI-Router sending root url to 404

2 Answers 2

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related