angular-ui-router-default

angular-ui-router-default

Motivation

Abstract state are useful for resolving values used by multiple child states. However, since one cannot navigate to an abstract state ($state.go('abstract_parent')) any part of the application that transitions state ($state.go(), ui-sref, etc.) must explicitly specify a non-abstract child state ($state.go('abstract_parent.concrete-child')).

Abstract are also useful in top-level navigation links, since ui-sref-active is set for all their child states. However, since you can't directly navigate to the (ui-sref="abstract_state"), implementing these menu items usually requires an ng-click handler that navigates to a concrete state.

The options for How to: Set up a default/index child state are tedious, non-intuitive and depend on URL routing. There is a need for a more convenient way of defining default child states with some great ideas on how to configure these.

This module provides basic support for specifying the default child state as a string.

Loading the Module

This module declares itself as ui.router.default, so it can be declared as a dependency of your application as normal:

var app = angular.module('myApp', ['ng', 'ui.router.default']);

Defining Default Child State

In your state definition for an abstract state, add a default property with the name of a child state (relative or absolute). The child state name can be provided statically as a string or dynamically as a function callback.

When a state transtion targets this abstract state, it will be redirected to the default child state instead.

$stateProvider
    .state('parent', {
      abstract: true,
      default: '.index',
      template: '<ui-view/>'
    })
    .state('parent.index', {
      // ...
    })
    .state('parent.page2', {
      // ...
    })
    .state('another', {
      abstract: true,
      default: ['$rootScope', function($rootScope) {
        return $rootScope.edit ? '.edit' : '.display';
      }]
    })
    .state('another.display', {
      // ...
    })
    .state('another.edit', {
      // ...
    })
    .state('anotherWithPromise',{
      abstract: true,
      default: ['$q',function($q){
        var defer = $q.defer();
        asyncFunctionThatReturnsPromise().then(function(){
          defer.resolve('anotherWithPromise.details');
        });
        return defer.promise;
      }]
    })
    .state('anotherWithPromise.details',{
      // ...
    })

Older version (< 0.0.5)

Older versions of this module specified the default state by assigning it to the abstract property:

$stateProvider
    .state('parent', {
      abstract: '.index',
      template: '<ui-view/>'
    })
    // ...

This behavior is still supported, but is deprecated, because it causes TypeScript conflicts. It is recommended that the { abstract: true, default: '.index' } format is used instead.

Using Default Child State

When a default child state is defined, the application can now navigate to the abstract parent state.

$state.go('parent');

<li ui-sref-active="active">
  <a ui-sref="parent">Go to Parent</a>
</li>

Copyright & License

Copyright 2015 Stepan Riha. All Rights Reserved.

This may be redistributed under the MIT licence. For the full license terms, see the LICENSE file which should be alongside this readme.