Angular ui-router… Display default tab

Question

I am arriving on bookDetails state form some other link. Here bookDetails state\'s template has links for different tabs (or templates). A

Answer 1

Try to add $state.go('bookDetails.basic') inside EditBookController. If I understood you< this will help.

Answer 2

From Directing the user to a child state when they are transitioning to its parent state using UI-Router:

Either change the bookDetails.basic state to:

.state('bookDetails.basic', {
  url : '',                  
  templateUrl: '/static/publisher/views/tab1.html'
})

Or add the following routing:

$urlRouterProvider.when('/books/{b_id}', '/books/{b_id}/basic');

Answer 3

I created working example here

There is similar question: Redirect a state to default substate with UI-Router in AngularJS

The solution comes from a cool "comment" related to an issue with redirection using .when() (https://stackoverflow.com/a/27131114/1679310) and really cool solution for it (by Chris T, but the original post was by yahyaKacem)

https://github.com/angular-ui/ui-router/issues/1584#issuecomment-75137373

In the state definition I added ONLY one setting to bookDetails state, the: redirectTo: 'bookDetails.basic',. Let's have a look:

$urlRouterProvider.otherwise('/home');

$stateProvider
.state('home', {              
          url:'/home',
          controller: 'HomeController',
          templateUrl: '/static/publisher/views/Publisher_Home_Template.html'
      })
.state('books', {
          url:'/books',
          controller: 'BooksController',
          templateUrl: '/static/publisher/views/Book_Listing_Template.html'
      })          
.state('bookDetails', {
          // NEW LINE
          redirectTo: 'bookDetails.basic',
          url : '/books/:b_id',
          controller: 'EditBookController',                  
          templateUrl: 'static/publisher/views/Product_Page_Template.html'
      }) 

.state('bookDetails.basic', {
          url : '/basic',                  
          templateUrl: '/static/publisher/views/tab1.html'
      }) 

.state('bookDetails.publisher', {
          url : '/publisher',                  
          templateUrl: '/static/publisher/views/tab2.html'
      })  

And now - only these few lines will do the miracle:

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

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

This way we can adjust any of our states with its default redirection...Check it here