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). And associated controller EditBookController has a json file using which I am building forms in different tabs with states like bookDetails.basic and bookDetails.publisher which use parent EditBookController. It's working fine. How to directly display the default bookDetails.basic instead of making user click the link? If I make bookDetails abstract(abbstract:true) and provide an empty link to bookDetails.basic I get following error Cannot transition to abstract state 'bookDetails'

    $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', {
              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'
          })

A plunk with similar problem. but code is different On clicking form it should land on the profile profile form.

Possible duplicate: stackoverflow.com/questions/17001589/… — xsh.7
– xsh.7, Commented Apr 11, 2015 at 11:14

Community · Accepted Answer · 2017-05-23 12:34:58Z

4

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

edited May 23, 2017 at 12:34

CommunityBot

11 silver badge

answered Apr 11, 2015 at 15:04

Radim Köhler

124k48 gold badges243 silver badges343 bronze badges

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

1 Comment

Radim Köhler Over a year ago

There is for sure NO magic, no miracles ;) Please, check the 1) Eventing system of UI-Router here: github.com/angular-ui/ui-router/wiki/Quick-Reference#events-1 and the 2) data Attach Custom Data to State Objects. These together are here combined, whenever there is a state change (e.g. targeting the parent) we just check if such state in data : {} setting does not have preferred child. That's it. Really ;) Enjoy mighty UI-Router sir ;)

Community · Accepted Answer · 2017-05-23 10:32:39Z

0

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

edited May 23, 2017 at 10:32

CommunityBot

11 silver badge

answered Apr 11, 2015 at 11:34

xsh.7

6,2701 gold badge25 silver badges26 bronze badges

1 Comment

shrinidhi kulkarni Over a year ago

here is a similar plunk i have created... edit it plnkr.co/edit/?p=streamer&s=hOUZg2P7uHv7gS2n

Roma Barantsevich · Accepted Answer · 2015-04-11 11:15:23Z

-1

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

answered Apr 11, 2015 at 11:15

Roma Barantsevich

272 bronze badges

1 Comment

xsh.7 Over a year ago

This will always route to bookDetails.basic when the bookDetails controller is loaded...

Collectives™ on Stack Overflow

Angular ui-router... Display default tab

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related