JSFiddle - React, Tailwind, and code Playground

by Chris Bao

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/foundation/4.1.6/css/normalize.min.css">
<div ng-app="app">
    
    <div ui-view></div>
    
    <!-- Below are the templates that get cached since we can't have external templates with JSFiddle -->

    <!-- CACHE FILE: list.html -->
    <script type="text/ng-template" id="content.html">
        <div class="row">
             <h3>This is the header</h3>
             <button class="add-btn">Add an item</button>
        </div>
        <div class="row">
            <div class="small-4 columns" ng-controller="SidebarCtrl">
                <ul>
                    <li ng-repeat="page in content"> <a ng-click="setPage(page)">goto {{page}}</a></li>
                </ul>
            </div>
            <div class="small-8 columns content">
                <div ui-view></div>
            </div>
        </div>
    </script>
    <!-- CACHE FILE: list.html -->
    <script type="text/ng-template" id="content.red.html">
        <div class="row red">
             {{mycontent}}{{$parent.trycontent}}
        </div>
    </script>
    <!-- CACHE FILE: list.html -->
    <script type="text/ng-template" id="content.blue.html">
        <div class="row blue">
             blue
        </div>
    </script>
    <!-- CACHE FILE: list.html -->
    <script type="text/ng-template" id="content.green.html">
        <div class="row green">
             green
        </div>
    </script>
</div>

CSS

</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> <link rel="stylesheet" href="//cdn.jsdelivr.net/foundation/4.1.2/css/foundation.min.css"> <script src="http://code.angularjs.org/1.1.5/angular.min.js"></script> <script src="http://code.angularjs.org/1.1.5//angular-resource.min.js"></script> <script src="http://angular-ui.github.io/ui-router/release/angular-ui-router.min.js"></script> <style> ul, ol, dl {
    list-style-type: none;
}
.red {
    background: red;
    color: white;
}
.green {
    background: green;
    color: yellow;
}
.blue {
    background: blue;
    color: white;
}
.content {
    height: 100%;
}
.row {
  position:relative;
}
.add-btn {
  position:absolute;
  right:0;
  top:0;
}

JavaScript

angular.module('app', ['ui.router'])
    .config(['$stateProvider', function ($stateProvider) {
        var home = {
                name: 'home',
                url: '/',
                templateUrl: 'content.html'
            },
            red = {
                name: 'red',
                url: '/red',
                parent: home,
                templateUrl: 'content.red.html',
                controller: "redCtrl as red"
            },
            blue = {
                name: 'blue',
                url: '/blue',
                parent: home,
                templateUrl: 'content.blue.html'
            },
            green = {
                name: 'green',
                url: '/green',
                parent: home,
                templateUrl: 'content.green.html'
            };
    
        $stateProvider.state(home);
        $stateProvider.state(red);
        $stateProvider.state(green);
        $stateProvider.state(blue);
    }])
    .run(['$state', function ($state) {
       $state.transitionTo('home'); 
    }])

    .controller('SidebarCtrl', function ($scope, $state) {
		$scope.trycontent = "try";
    $scope.content = ['red', 'green', 'blue'];

    $scope.setPage = function (page) {
        $state.transitionTo(page);
    };
})
    .controller('redCtrl', function ($scope) {

    $scope.mycontent = "newred";
});