How To Autoload ui-view on nested views?

Question

I have code like this

<a ui-sref="nested.something">something</a>
<div ui-view="nested.something"></div>

how to load ui-view without click ui-sref ?

Answer 1

EXTEND - related to this plunker provided by OP in the comments above

The state definition is:

.state('store', {
    views: {
      'store': {
        templateUrl: 'store.html'
      }
    }
})
  
.state('store.detail', {
    views: {
      'store_detail': {
        templateUrl: 'store_detail.html'
      }
    }
})

Then in this updated plunker we can see that this would do the job

//$urlRouterProvider.otherwise('/store');
  
$urlRouterProvider.otherwise(function($injector, $location){
   var state = $injector.get('$state');
   state.go('store.detail');
   return $location.path();
});

Reason? states do not have defined url. Which is a bit weird. So, I would honestly rather suggested to do it like this (the link to such plunker):

  $urlRouterProvider.otherwise('/store/detail');
  //$urlRouterProvider.otherwise(function($injector, $location){
  //   var state = $injector.get('$state');
  //   state.go('store.detail');
  //   return $location.path();
  //});
  
  $stateProvider
  
  .state('store', {
    url: '/store',
    views: {
      'store': {
        templateUrl: 'store.html'
      }
    }
  })
  
  .state('store.detail', {
    url: '/detail',
    views: {
      'store_detail': {
        templateUrl: 'store_detail.html'
      }
    }
  })

There is a working plunker

ORIGINAL

We can use the .otherwise(rule) of $urlRouterProvider, documented here

$urlRouterProvider.otherwise('/parent/child');

As the doc says:

otherwise(rule)

Defines a path that is used when an invalid route is requested.

So, this could be used for some default - start up "redirection"

The .otherwise() could be even a function, like shown here:

How not to change url when show 404 error page with ui-router

which takes '$injector', '$location' and can do even much more magic (on invalid or startup path)

$urlRouterProvider.otherwise(function($injector, $location){
   var state = $injector.get('$state');
   state.go('404');
   return $location.path();
});

ALSO, if we want to fill in some more details into some nested viesw, we can do it by defining multi-named views:

  .state('parent.child', { 
      url: "/child",
      views: {
        '' : {
          templateUrl: 'tpl.child.html',
          controller: 'ChildCtrl',
        },
        'nested.something@parent.child' : {
          templateUrl: 'tpl.something.html',
        },
      }
  })

So, if the tpl.child.html will have this anchor/target:

<i>place for nested something:</i>
<div ui-view="nested.something"></div>

it will be filled with the tpl.something.html content

Check it in action here