JSFiddle - React, Tailwind, and code Playground

by mslocum

HTML

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
<script src="http://code.angularjs.org/1.2.14/angular-route.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<div class="navbar navbar-fixed-top navbar-inverse" role="navigation">
    <div class="navbar-inner"><div class="container">
        <div class="navbar-header">
            <a class="navbar-brand" ui-sref="main">SX-View</a>
        </div>
        <ul class="nav navbar-nav">
            <li><a data-ng-click="changeRoute('/')">Main</a></li>
            <li><a data-ng-click="changeRoute('/deal')">Deal</a></li>
            <li><a data-ng-click="changeRoute('/about')">About</a></li>
        </ul>
    </div></div><!-- /.navbar-inner -->
</div><!-- /.navbar -->

<!-- Do NOT try and put sx-view and ng-include on the same DIV -->
<div class="container" style="margin-top:60px">
    <div sx-view="/">
        <div ></div>
    </div>
    <div sx-view="/deal">
        <div ></div>
    </div>
    <div sx-view="/about">
        <div ></div>
    </div>
</div>

<div class="container" style="padding: 30px 0;">
    <ul>
        <li data-ng-repeat="iTime in aTimes">{{iTime}}</li>
    </ul>
</div>

JavaScript

angular.module('myApp', ['ngRoute'])
    .config(function($routeProvider, $locationProvider) {
        //
        // For any unmatched url, redirect to /
//        $routeProvider.otherwise("/");
        //
        // Now set up the states
        $routeProvider
            .when('/', {
                template: "main.html"
            })
            .when('/deal', {
                template: "deal.html"
            })
            .when('/about', {
                template: "about.html"
            })
        ;
    })
    .run(function($templateCache) {
        var strDivs = "<div class='box'></div>";
        // 2^12 = 4096
        // 2^13 = 8192 // similar to the all channel page in publisher
        // 2^14 = 16384
        for (var i=0; i < 13; i++) {
            strDivs += strDivs;
        }
        console.log('creating templates');
        $templateCache.put('main.html', '<h1>Main Site</h1>' + strDivs + "<hr/>");
        $templateCache.put('deal.html', '<h1>Deal Page</h1>' + strDivs + "<hr/>");
        $templateCache.put('about.html', '<h1>About Page</h1>' + strDivs + "<hr/>");
    })
    .directive("sxView", function ($rootScope) {
    
        var parseRoute = function(strLocation) {
            return strLocation.split('#')[1] || '/';
        };
    
        return {
            restrict: "A",
    //        scope: {
    //            strRoute: '@'
    //        },
    //        template: '<h2>Whatup Test</h2>',
            link: function (scope, element, attr) {
                $rootScope.$on("$routeChangeStart",
                    function (event, current, previous, rejection) {
    //                    console.log("start");
                    });
                $rootScope.$on("$routeChangeSuccess",
                    function (event, current, previous, rejection) {
    //                    console.log("success");
                    });
                $rootScope.$on("$routeChangeError",
                    function (event, current, previous,...