Angular ui router default route

Suggested Videos
Part 44 - AngularJS ui router parameters
Part 45 - AngularJS ui router optional parameters
Part 46 - Case sensitivity with angularjs ui-router



In this video we will discuss how to set a default route when using ui-router in your angular application.



At the moment the problem is that, if you try to navigate to a route that is not configured, you will see only the layout page without any partial template injected into it.

For example if you navigate to http://localhost:51983/ABC, since ABC is not a configured route you will see a blank layout page

You will also have this same problem if you navigate to the root url (http://localhost:51983). In both these cases we want angular to redirect to default route if the user is trying to navigate to a state that is not configured.

To configure the default route when you are using ui-router inject $urlRouterProvider service into the config() function and use otherwise() function passing it the default route.

.config(function ($urlRouterProvider) {

    $urlRouterProvider.otherwise("/home");

})

With this change if the user tries to navigate to a route that is not configured (http://localhost:51983/ABC) or just to the root URL (http://localhost:51983), the user will be automatically redirected to http://localhost:51983/home.