JSFiddle - React, Tailwind, and code Playground

by awolf2904

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>
<div ng-app="demoApp" ng-controller="appController">
    <script type="text/ng-template" id="views/home.html">
        <div>
            <h1>This is home</h1>
        </div>
        <div class="wrapper">
            <div ui-view='left'>
            </div>
            <div ui-view='right'>
            </div>
            <a href="#" ui-sref="home.main">home</a>
        </div>
    </script>
    <script type="text/ng-template" id="views/charting/chartHome.html">
        left {{hello}}
        <a href="#" ui-sref="home.main.left">left change</a>
    </script>
    <script type="text/ng-template" id="views/view1.html">
        right {{hello}}
    </script>
    
    <div ui-view=""></div>
</div>

CSS

[ui-view='left'] {
    float: left;
    width: 50%;
    height: 200px;
    background: lightgreen;
}


[ui-view='right'] {
    float: right;
    width: 50%;
    height: 200px;
    background: lightgray;
}

JavaScript

angular.module('demoApp', ['ui.router'])
.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
      $urlRouterProvider.otherwise('/home');
      $stateProvider
      .state('home', {
          templateUrl: 'views/home.html',
          abstract: true
      })
      .state('home.main', {
            url: '/home',
            views: {
                //'': { templateUrl: 'views/home.html' },
                'left@home': { 
                  templateUrl: 'views/charting/chartHome.html',
                  controller: 'LeftCtrl'
                },
                'right@home': { 
                    templateUrl: 'views/view1.html',
                    controller: 'RightCtrl'
                }
            }

        })
      .state('home.main.left', { 
         views: {
                //'': { templateUrl: 'views/home.html' },
                'left@home': { 
                  template: 'left1 <a href="#" ui-sref="home.main.left.2">left 2 change</a>',
                  controller: 'LeftCtrl'
                }
            }
      })
      .state('home.main.left.2', {
          views: {
                //'': { templateUrl: 'views/home.html' },
                'left@home': { 
                  template: 'left2 <a href="#" ui-sref="home.main.left">back to left 1 change</a><br/><a href="#" ui-sref="home.main.left.2.right">change right</a>',
                  controller: 'LeftCtrl'
                }
            }
      })
      .state('home.main.left.2.right', { 
         views: {
                //'': { templateUrl: 'views/home.html' },
                'right@home': { 
                  template: 'right changed from left <a href="#" ui-sref="home.main.left.2.right.1">left change</a>',
                  controller: 'RightCtrl'
                }
            }
      })
      .state('home.main.left.2.right.1', { 
         views: {
                //'': { templateUrl: 'views/home.html' },
                'left@home': { 
                 ...