UIRouter Conditional Routing

by dshilkret

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.js"></script>
<form>
  <ul>
    <li><a ui-sref="app.one">One</a></li>
    <li><a ui-sref="app.two">Two</a></li>
    <li><a ui-sref="app.three">Three</a></li>
  </ul>
  <div class="container" ui-view ng-controller='controller'></div>
</form>

JavaScript

var completeRegistration = '<a ui-sref="app.done"><button type="submit">next</button></a>';

angular.module('myApp', ['ui.router'])
  .config(['$stateProvider',
    ($stateProvider) => {
      $stateProvider
        .state('app', {
          abstract: true,
          template: '<ui-view/>',
          url: '/'
        })
        .state('app.one', {
          url: '/one',
          template: 'First Name: <input type="text" ng-model="user.firstName">' + completeRegistration
        })
        .state('app.two', {
          url: '/two',
          template: 'Last Name: <input type="text" ng-model="user.lastName">' + completeRegistration,
          data: {
            redirect: ['userService', (userService) => {
              if (!userService.user.firstName) {
                return 'app.one';
              }
            }]
          }
        })
        .state('app.three', {
          url: '/three',
          template: 'DOB: <input type="text" ng-model="user.dob">' + completeRegistration,
          data: {
            redirect: ['userService', (userService) => {
              if (!userService.user.lastName) {
                return 'app.two';
              }
            }]
          }
        })
        .state('app.done', {
          url: '/done',
          template: 'Thanks {{user.firstName}}!',
          data: {
            redirect: ['userService', (userService) => {
              if (!userService.user.dob) {
                return 'app.three';
              }
            }]
          }
        });
    }
  ])
  .controller('controller', ['$scope', 'userService', ($scope, userService) => {
    $scope.user = userService.user;
  }])
  .service('userService', function() {
    this.user = {};
  })
  .run(['$state', '$rootScope', '$injector', ($state, $rootScope, $injector) => {
    $rootScope.$on('$stateChangeStart', (event, toState, toParams) => {
      if (toState.data && toState.data.redirect) {
        var redirectTo = $injector.invoke(toState.data.redirect, this, {
...