JSFiddle - React, Tailwind, and code Playground

by cdaringe

HTML

<link rel="stylesheet" href="http://getbootstrap.com/examples/dashboard/dashboard.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<script src="http://code.angularjs.org/1.2.16/angular-route.min.js"></script>
<body ng-app="devSyncApp">
    <div data-ng-controller="AppController">
        <ul class="nav nav-sidebar">
            <li class="active"><a href="#">Overview</a>

            </li>
            <li><a href="/db/az-config">Asana-Zen Config</a>

            </li>
            <li><a href="/db/az-syncs">Asana-Zen Syncs</a>

            </li>
        </ul>
        <ul class="nav nav-sidebar">
            <li><a href="/db/zen-complete">Zen Complete</a>

            </li>
            <li><a href="/db/zen-incomplete">Zen Incomplete</a>

            </li>
        </ul>
        <ul class="nav nav-sidebar">
            <li><a href="/db/asana-complete">Asana Complete</a>

            </li>
            <li><a href="/db/asana-incomplete">Asana Incomplete</a>

            </li>
        </ul>
        <div data-ng-view="" class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main"></div>
    </div>
</body>

JavaScript

var devSyncApp = angular.module('devSyncApp', ['ngRoute']);


devSyncApp.config(function ($routeProvider) {
    var relPath = 'partials/';
    $routeProvider.when('/', {
        controller: 'HomeController',
        template: '<div><h2>Welcome</h2><p>Select an action from the nav bars!</p></div>'
    })
        .when('/db/:dbname', {
        controller: 'DBViewController',
        template: '<h2 class="sub-header">{{selectedDB}}</h2>'
    })
        .otherwise({
        redirectTo: '/'
    });
});

devSyncApp.controller('AppController', function ($scope, $http) {
    $scope.hello = 'world';
});

devSyncApp.controller('DBViewController',

function ($scope, $routeParams) {
    $scope.dbvc = {
        currentDB: '',
        dbs: [
            'az-config',
            'az-syncs',
            'zen-complete',
            'zen-incomplete',
            'asana-complete',
            'asana-incomplete', ]
    };

    //Activate selected db
    if ($routeParams.dbname) {
        $scope.dbvc.currentDB = $routeParams.dbname;
    }
    console.dir($routeParams);
    console.log($routeParams.dbname);
});

devSyncApp.controller('HomeController',

function ($scope) {
    $scope.hc = {};
    $scope.hc.hello = 'hello';
});