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'
    }
  } 
})

Community · Accepted Answer · 2017-05-23 11:59:52Z

1

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...

edited May 23, 2017 at 11:59

CommunityBot

11 silver badge

answered May 9, 2016 at 5:22

Radim Köhler

124k48 gold badges243 silver badges343 bronze badges

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

Comments

Aditya Singh · Accepted Answer · 2016-05-08 20:51:45Z

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 8, 2016 at 20:51

Aditya Singh

16.8k15 gold badges49 silver badges70 bronze badges

1 Comment

jd1138 Over a year ago

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.

Collectives™ on Stack Overflow

Angular ui-view default / proper usage:

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related