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>
        </div>
        <div class="row" ng-controller="SidebarCtrl as sidebar">
            <div class="small-4 columns" >
                <ul>
                    <li><a ui-sref=".red">red</a></li>
                    <li><a ui-sref=".green">green</a></li>
                    <li><a ui-sref=".blue">blue</a></li>
                </ul>
                <button class="add-btn" ng-click="sidebar.addItem()">Add an item</button>
            <ul>
             	<li ng-repeat="x in sidebar.itemlist">{{x}}</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">
             <ul>
             		<li ng-repeat="x in sidebar.itemlist">{{x}}</li>
             </ul>
             {{sidebar.itemlist}}
        </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%;
}

JavaScript

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

    .controller('SidebarCtrl', function ($state) {
    var self = this;
    this.itemlist = [];
    this.content = ['red', 'green', 'blue'];
    this.setPage = function (page) {
        $state.transitionTo(page);
    };
    this.addItem = function (){
    	self.itemlist.push(self.itemlist.length + 1);
    }
})
    .controller('MainPanel', function () {

    this.mycontent = "newred";
});