AngularJS parallel states with ui-router

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <title>AngularJS with jquery and UI router plunk template</title>
    
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
    <link rel="stylesheet" href="./styles.css" />
    
    <script src="https://jspm.io/system.js"></script>
    <script data-require="jquery@3.1.1" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script>
          System.import('./main');
    </script>
  </head>

  <body>
    <main class="jumbotron">
      <div class="container">
        <div class="col-sm-8 col-sm-offset-2">
          <div ui-view=""></div>
        </div>
      </div>
    </main>
  </body>

</html>

import angular from 'angular';
import homeComponent from './home/home';
import routeModule from './route.config';
import parallel from './parallel.component';
import sub from './sub.component';

const main = angular.module('main', [routeModule])
    .component('home', homeComponent)
    .component('parallel', parallel)
    .component('sub', sub);
    
angular.bootstrap(document.documentElement, ['main']);

export class HomeComponent {
  
  constructor($state, $timeout) {
    
    this.$state = $state;
    this.$timeout = $timeout;
  }
  
  $onInit() {
    
    console.log('Home Init');
    
    // removing the `subOne` part breaks it even though these states have
    // default deepStateRedirect
    
    this.loadNextState('home.parallelOne.subOne')
      .then(() => this.loadNextState('home.parallelTwo.subOne'))
      .then(() => this.loadNextState('home.parallelThree.subOne'))
      .catch(e => console.log(e));
  }
  
  loadNextState(state) {
    
    return this.$timeout(() => this.$state.go(state));
  }
}

export default {
  
  selector: 'home',
  controller: HomeComponent,
  templateUrl: 'home/home.html'
}

<h2>Parallel States With Different Sub States</h2>

<button ui-sref="home.parallelOne">Load First</button>
<button ui-sref="home.parallelTwo">Load Second</button>
<button ui-sref="home.parallelThree">Load Third</button>

<section class="parallel row" ui-view="parallelOne">Loading...</section>

<section class="parallel row" ui-view="parallelTwo">Loading...</section>

<section class="parallel row" ui-view="parallelThree">Loading...</section>

import angular from 'angular';
import uiRouter from 'https://raw.githubusercontent.com/cdnjs/cdnjs/master/ajax/libs/angular-ui-router/0.4.2/angular-ui-router.js';
import uiRouterExtras from 'https://cdnjs.cloudflare.com/ajax/libs/ui-router-extras/0.1.3/ct-ui-router-extras.js';

const routeModule = angular.module('main.routes', [uiRouter, 'ct.ui.router.extras'])
  .config(($stateProvider, $urlRouterProvider) => {

  // Base
  $stateProvider.state('home', {
    
    url: '/home',
    template: '<home />',
  })
  
  // ### Parallel 1 ###
  $stateProvider.state('home.parallelOne', {
      
      sticky: true,
      deepStateRedirect: { 
        default: 'home.parallelOne.subOne' 
      },
      views: {
            parallelOne: {
                template: '<parallel title="Parallel One" type="panel-primary" />'
            }
        }
    })
    
  defineSubStates('home.parallelOne');
    
    
    // ### Parallel 2 ###
  $stateProvider.state('home.parallelTwo', {

      sticky: true,
      deepStateRedirect: true,
      views: {
            parallelTwo: {
                template: '<parallel title="Parallel Two" type="panel-success" />'
            }
        }
    })
    
    defineSubStates('home.parallelTwo');
    
      // ### Parallel 3 ###
  $stateProvider.state('home.parallelThree', {

      sticky: true,
      deepStateRedirect: { 
        default: 'home.parallelThree.subOne' 
      },
      views: {
            parallelThree: {
                template: '<parallel title="Parallel Three" type="panel-info" />'
            }
        }
    })
    
  defineSubStates('home.parallelThree');
  
  $urlRouterProvider.when('', '/home');
  
  function defineSubStates(parent) {
    
    ['One', 'Two', 'Three'].forEach(i => {
      
      $stateProvider.state(`${parent}.sub${i}`, {

        template: `<sub number="${i}">`
      })
    })
  }
});

export default routeModule.name;

.parallel {
  margin-top: 20px;
}

a.active {
  color: mediumvioletred;
}

export class ParallelComponent {
  
}

export default {
  
  templateUrl: './parallel.template.html',
  
  controller: ParallelComponent,
  bindings: {
    title: '@',
    type: '@'
  }
}

export class SubComponent {
  
}

export default {
  
  template: `<h4>Sub state {{$ctrl.number}}</h4>`,
  
  controller: SubComponent,
  bindings: {
    number: '@'
  }
}

<div class="panel" ng-class="$ctrl.type">
  
  <div class="panel-heading">
    <h3 class="panel-title">{{$ctrl.title}}</h3>
  </div>
  
  <div class="panel-body">

    <ul>
      <li ng-repeat="link in ['subOne', 'subTwo', 'subThree']">
        <a ui-sref=".{{link}}" ui-sref-active="active">{{link}}</a>
      </li>
    </ul>
    
    <div ui-view></div>
  </div>
</div>