[AngularJS] ui-router: Abstract States

ui-router has the powerful ability to define abstract states, or states that can't be navigated to, but are useful for defining a set of states with shared properties.

 

angular.module("auth", [])

    .config(function ($stateProvider) {

      $stateProvider
          .state('in', {
            url: '/in',
            template: '<h1>Sign In</h1>' +
                '<button class="btn btn-primary" ng-click="signIn()">Sign In Now</button>'
          })
          .state('up', {
            url: '/up',
            template: '<h1>Sign Up for a Free Account.</h1>'
          })
    });    

 

For example, the sign in page an sign up page share the same content. Those content can be written into the abstract ui router.

angular.module("auth", [])

    .config(function ($stateProvider) {

      $stateProvider
          .state('sign', {
            abstract: true,
            url: '/sign',
            template: '<a ui-sref=".in">Sign In</a>' +
                '<a ui-sref=".up">Sign Up!</a>' +
                '<ui-view/>',
            controller: function($scope, authService){
              $scope.signIn = function(){
                authService.signIn();
              }
            },
            resolve: {},
            data: {},
            onEnter: function(){},
            onExit: function(){}
          })
          .state('sign.in', {
            url: '/in',
            template: '<h1>Sign In</h1>' +
                '<button class="btn btn-primary" ng-click="signIn()">Sign In Now</button>'
          })
          .state('sign.up', {
            url: '/up',
            template: '<h1>Sign Up for a Free Account.</h1>'
          })
    });