angularjs ui-router default child state and ui-sref

Question

I have the following states in my ui-router state provider:

$urlRouterProvider.when(\'/parent\', \'/parent/child\');
$stateProvider.state(\'parent\', {
              


        

Answer 1

If you want to use $state's convenient naming structure for abstract states, you can use this in a service:

$location.path(
    $state.href('app.some.abstract.state', { some: 'params' })
);

Or this in a template ($state must be available in the local or global $scope):

<a ng-href="{{$state.href('app.some.abstract.state', { some: 'params' })}}">...</a>

If I found myself doing this regularly, I would create a directive similar to ui-sref for this, minus the abstract state limitation.

Answer 2

abstract states can not be targeted directly. They mainly serve as a foundation to build child states on. The only reason it works fine with the URL is that the /parent gets caught by the .when

That means when you invoke a child using

<a ui-sref="parent.child">

the child inside the parent gets loaded, meaning the parent will be loaded as the layer around it.

So, never target an abstract state itself. It's like having a door inside a door frame. You can only open and interact with the door (child), but never with the frame (parent) directly. However, when you interact with the door, the door and the frame are part of a system that gets loaded.

You can give the child an empty URL, so that it doesn't append anything to the parent state URL and will then be loaded.

See here for more info: https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views#abstract-states