1

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 ?

5
  • 1
    Have you seen $urlRouterProvider.otherwise('/something');? - doc angular-ui.github.io/ui-router/site/#/api/… Commented May 18, 2015 at 6:42
  • that's code is on my nested views, how can i use $urlRouterProvider.otherwise('/something'); ? Commented May 18, 2015 at 6:49
  • 1
    Honestly, how would one know that this code is on your nested view? Should not you provide a bit more details? Even a plunker would help. Solution with UI-Router could at the end be very simple... Commented May 18, 2015 at 6:51
  • Alternatively, have the child state's URL be url: ''. It should load with the parent Commented May 18, 2015 at 6:54
  • @DonnyGunawan extended answer with more details and more examples. Hope it helps. Commented May 18, 2015 at 7:21

1 Answer 1

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',
        },
        '[email protected]' : {
          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

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

1 Comment

what i mean is, when i click ui-sref="store" i want to load ui-view="store" and ui-view="store_detail" too, i want to load both when i click ui-sref="store" ^_^ thx i can do it now ^_^ plnkr.co/edit/vKAbvHrtuHIBKkyNCbtq?p=preview

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.