Home route in ui-router

All we need is an easy explanation of the problem, so here it is.

I use https://github.com/angular-ui/ui-router library. When I try to access index route (‘/’) I’m redirected to 404. The code:

angular.module('cr').config(function($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state('home', {
            url: '/',
            templateUrl: 'views/index.html'
        });

    $urlRouterProvider.otherwise('/404');
});

What’s wrong with that code? Although when I use ui-sref=”home” it works but the url looks like ‘/#/’ but when a user inputs site name he uses just domain name, like ‘mysite.com’, not ‘mysite.com/#/’

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

You’ve declared how to behave when any unknown/other route is provided – go to /404.

But we also have to define how to behave, when some expected, but not “exact” / “not known” route is accessed, ie. create alias

That’s where the .when() could/should be used:

...

// the known route, with missing '/' - let's create alias
$urlRouterProvider.when('', '/');

// the unknown
$urlRouterProvider.otherwise('/404');

Method 2

There is nothing wrong with your code. You are just missing an explicit state for 404. Try adding this:

.state('404', {
    url: '{path:.*}',
    templateUrl: 'views/404'
});

To get rid of the hash (#) symbol you need to inject one more dependency into your config module:

$locationProvider

And use the .html5Mode() method to set HTML5 Mode to true, like so

$locationProvider.html5Mode(true);

Also, ensure your server is configured to allow Angular to handle your routing. For example, here is a Node/Express configuration that allows the above technique to work:

app.get('*', routes.index);

And in your index.js file (or however you configure your node.js instance):

exports.index = function(req, res){
   res.render('index');
};

Method 3

Here by example:

// the known route, with missing '/' - let's create alias
$urlRouterProvider.when('', '/');

// Redirect any unmatched url to 404 view (without change location.hash)
$urlRouterProvider.otherwise(function($injector) {
    var $state = $injector.get('$state');
    $state.go('404', null, {
        location: false
    });

}); 

$stateProvider
    // homepage views
    .state('homepage', {
        url: "/",
        templateUrl: "views/homepage.html",            
        data: {
            pageTitle: 'Home'
        }
        ... more here ...
    })
    // 404 views
    .state('404', {
        url: "/404",
        templateUrl: "views/404.html",            
        data: {
            pageTitle: '404 Not found'
        }
    });

Method 4

The simplest way for me with ui-router was giving the url field an empty value :

        $stateProvider
        .state('home', {
            url: '',
            templateUrl: 'views/homepage.html',
            controller: 'AppCtrl'
        })

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply