JSFiddle - React, Tailwind, and code Playground

by patelsan

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.min.js"></script>
<div ng-app='myApp' ui-view ng-controller='MainCtrl'>
</div>

CSS

.top {
    border: 1px solid black;
    position: relative;
    width: 400px;
    height: 200px;
}
.middle {
    border: 1px solid blue;
    position: relative;
    width: 400px;
    height: 200px;
}

JavaScript

var app;

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

  app.config(function($stateProvider) {
    return $stateProvider.state('root', {
      template: "<div class='top' ui-view='viewA'></div><div class='middle' ui-view='viewB'></div>"
    }).state('root.step1', {
      url: '',
      views: {
        'viewA': {
          template: '<h1>View A</h1>'
        }
      }
    }).state('root.step1.step2', {
      url: '/step2',
      views: {
        'viewB@root': {
          template: '<h1>View B</h1>'
        }
      }
    });
  });

  app.controller('MainCtrl', [
    '$scope', '$state', function($scope, $state) {
      $state.go('root.step1.step2');
    }
  ]);