Default route for angular ui router

Question

The sample demo of the angular ui router has this link for the start page:

full url of 'ui-router' is / or http://angular-ui.github.io/ui-router/sample/#/

full url of 'about' is /about or http://angular-ui.github.io/ui-router/sample/#/about

When I was using durandalJS there was a limitation that the default url is just "/" there can be no "/ui-router".

Has the angular ui router plugin the same limitation?

Stephan Kristyn · Answer 1 · 2014-12-14T10:20:51.393

18

The default route for ui-router can be whatever you want it to be, there is no limitaion like in DurandalJS. Just use:

$stateProvider
    .state("otherwise", { url : '/otherwise'...})

This is the official documentaion of ui-router, however I could not find the otherwise technique in there: https://github.com/angular-ui/ui-router/wiki

@apohi: ui-router is not angular-route. Your reply is adressing the wrong module.

edited Dec 14 '14 at 10:20

answered Dec 12 '14 at 01:22

Stephan Kristyn

15,015
14
88
147

The OP was asking about ui-router, your first link points to documentation on angular-router. – Brian Topping Dec 12 '14 at 17:36
1

Otherwise should be a function call on `$urlRouterProvider`, not the name passed to `.state()`—unless you intend to set `url: '/otherwise'` on your default route… – binki Aug 29 '18 at 16:12

score 7 · Answer 2 · answered Mar 20 '15 at 12:43

You can do it this way:

angular.module('MyApp', ['ui.router']).config([
  '$stateProvider', function ($stateProvider) {
     $stateProvider.state('default', {
     controller: 'MyController',
     templateUrl: 'path/to/index.html',
     url:''
  })
)];

That way whenever the url is on the root of your site ui-router will capture it on a state that matches, in this case, 'default'.

score 5 · Answer 3 · answered Nov 21 '16 at 20:52

use the $urlRouterProvider and its otherwise function:

angular.module('MyApp', ['ui.router'])
  .config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
     $stateProvider.state('default', {
     controller: 'MyController',
     templateUrl: 'path/to/template.ng.html',
     url:'/default'
    })
    $urlRouterProvider.otherwise('/default')
  })];

score 4 · Accepted Answer · edited May 23 '17 at 11:53

4

See here there is an "otherwise" option for a default route.

If you are talking about default route PARAMETERS, then there is an answer here.

edited May 23 '17 at 11:53

Community

1
1

answered Mar 06 '14 at 21:06

apohl

1,913
27
30

37

@apohi: ui-router != angular-route. – Stephan Kristyn Dec 12 '14 at 01:21
6

Why was this answer chosen? angular router(ngRoute) is different from angular ui router(ui.router). This might confuse the beginners. – Alex Coroza Mar 16 '15 at 06:44
@boi_echos I'm a beginner, but from what I see in this answer it looks correct. UI-Router has an `otherwise` function. Can you point out what is incorrect? – hofnarwillie Mar 27 '15 at 17:44
I fixed the first link. – apohl Jun 03 '16 at 13:12
@hofnarwillie This answer says that `otherwise` is an option (e.g., a property passed in on an object) instead of a function. – binki Aug 29 '18 at 16:10
This answer links to things and does not include enough of a description or example to be useful on its own. – binki Aug 29 '18 at 16:11

score 1 · Answer 5 · answered Mar 03 '17 at 05:07

You can use $urlRouterProvide.otherwise. This will work if you try to navigate to a route url that has not been defined.

Taken from here.

function configurUIRoutes($stateProvider, $urlRouterProvider) {

$stateProvider
    .state('myhomepage',
    {
        abstract: false,
        url: '/myhomepageurl',
        templateUrl: "some-path/staff-admin.html",
        controller: 'HomeController'
    });

$urlRouterProvider.otherwise('/myhomepageurl'); // User will be taken to /myhomepageurl if they enter a non-matched entry into URL

}

score 1 · Answer 6 · answered Oct 31 '17 at 05:45

The simplest way of all

add $urlRouterProvider service in config(function($urlRouterProvider))

and then

app.config(function ($stateProvider, $urlMatcherFactoryProvider, $urlRouterProvider) {

         $urlRouterProvider.otherwise('employeesState'); //default route

         $stateProvider.state('employeesState', function(){
              //state configuration here
         }) //employees state

         $stateProvider.state('cutomersState', function(){
             //state configuration here
         })
}

name any of the state in otherwise function to which you want as your default state/route

Default route for angular ui router

6 Answers6

Linked