JSFiddle - React, Tailwind, and code Playground

by ipeshev

HTML

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="//angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
<div class="navbar" ng-app="myapp">
    <div class="navbar-inner">
      <a class="brand" ui-sref="index">Quick Start</a>
      <ul class="nav">
        <li><a ui-sref="index">Home</a></li>
        <li><a ui-sref="route1">Route 1</a></li>
        <li><a ui-sref="route2">Route 2</a></li>
      </ul>
    </div>
  </div>

  <div class="row">
    <div class="span6">
      <div class="well" ui-view="viewA"></div>        
    </div>
    <div class="span6">
      <div class="well" ui-view="viewB"></div>        
    </div>
  </div>

JavaScript

var myapp = angular.module('myapp', ["ui.router"])
    myapp.config(function($stateProvider){
    $stateProvider
        .state('index', {
            url: "",
            views: {
                "viewA": {
                    template: "index.viewA"
                },
                "viewB": {
                    template: "index.viewB"
                }
            }
        })
        .state('route1', {
            url: "/route1",
            views: {
                "viewA": {
                    template: "route1.viewA"
                },
                "viewB": {
                    template: "route1.viewB"
                }
            }
        })
        .state('route2', {
            url: "/route2",
            views: {
                "viewA": {
                    template: "route2.viewA"
                },
                "viewB": {
                    template: "route2.viewB"
                }
            }
        })
    })