Angular ui-view default / proper usage:

Question

This is for a 'subset' view off of my main view where I have a tab bar (Map, Market and Charts). When clicking them, they are properly output in this tag via UiSref.

 <div ui-view name="inception2"></div>

The 3 views are defined in my routes file as posted below.

How can I default the view in uiViewName to tsView2? Currently I need to click in order to route. Again I have a router file set up that does have abstract states and all - this is only for a simple tab exercise in the existing project. Thanks!

.state('tsView1', {
  views: {
    'inception2': {
      templateUrl: 'client/templates/tsVview1.html'
    }
  } 
})

.state('tsView2', {
  views: {
    'inception2': {
      templateUrl: 'client/templates/tsView2.html'
    }
  } 
})

.state('tsView3', {
  views: {
    'inception2': {
      templateUrl: 'client/templates/tsView3'
    }
  } 
})

score 1 · Answer 1 · answered May 08 '16 at 20:51

1

Use $urlRouterProvider to configure the default route using the otherwise method

.state('tsView2', {
  url: '/tsview2',
  views: {
    'inception2': {
     templateUrl: 'client/templates/tsView2.html'
   }
  } 
})


$urlRouterProvider.otherwise('/tsview2');

For details on $urlRouterProvider, see this: https://github.com/angular-ui/ui-router/wiki/URL-Routing#urlrouterprovider

answered May 08 '16 at 20:51

Aditya Singh

15,810
15
45
67

Aditya, My apologies - I didn't mention this is a one-off / subset in my existing project - I already use UrlRouteProvider otherwise to redirect on the main nav view. This UI View is a subset. I'll update with those details. – jd1138 May 08 '16 at 21:05

score 1 · Accepted Answer · edited May 23 '17 at 11:59

You can try this solution

Redirect a state to default substate with UI-Router in AngularJS

Introduce a small engine, reading a setting redirectTo

app.run(['$rootScope', '$state', function($rootScope, $state) {

    $rootScope.$on('$stateChangeStart', function(evt, to, params) {
      if (to.redirectTo) {
        evt.preventDefault();
        $state.go(to.redirectTo, params)
      }
    });
}]);

And then apply the default child on its parent

.state('main', {
  redirectTo: 'tsView2',
  ...
  }
.state('tsView2', {
  parent: 'main'
  ...
  }

This, other words, requires the tsViews to be children... but I guess that it already should be true

This is for a 'subset' view off of my main view where I have...

Angular ui-view default / proper usage:

2 Answers2