How to define a default route in AngularJS?

Question

I am trying to define a default route when angularjs hits the below url

The default route should go to home page below.

How can I define it using $urlRouterProvider ? The below line does not seem to be making any difference.

$urlRouterProvider.otherwise('/');

Any suggestions? Thank you!

 appl.config(['$stateProvider', '$urlMatcherFactoryProvider', '$locationProvider', '$urlRouterProvider',
    function ($stateProvider, $urlMatcherFactoryProvider, $locationProvider, $urlRouterProvider) {

        $urlMatcherFactoryProvider.caseInsensitive(true);

        $stateProvider
            .state('home', {
                url: '',
                templateUrl: 'search',
                controller: 'applCtrl'
            })
            .state('person', {
                url: '/person',
                templateUrl: 'Person',
                controller: 'applPersonCtrl'
            })

        $urlRouterProvider.otherwise('/');

        $locationProvider.hashPrefix(''); //it defaults to ! after angularjs 1.5

    }]);

What happens if you set <base href="/"> inside your <head></head> element in index.html and then add $locationProvider.html5Mode(true); just above where you're calling hashPrefix('')? — Lex
– Lex, Commented Jan 7, 2019 at 23:28

Luke Hutton · Accepted Answer · 2019-01-07 23:09:27Z

1

You can match on the url of your site (with trailing /) and explicitly go to the home state as follows, while also having a not found url condition:

$urlRouterProvider.otherwise(function ($injector, $location) {
    var $state = $injector.get('$state');
    if ($location.$$url === '' || $location.$$url === '/') {
        $state.go('home');
        return;
    }
    $state.go('notFound'); // some custom not found page
});

answered Jan 7, 2019 at 23:09

Luke Hutton

10.8k6 gold badges36 silver badges59 bronze badges

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

Collectives™ on Stack Overflow

How to define a default route in AngularJS?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related