JSFiddle - React, Tailwind, and code Playground

by johnoscott

HTML

<!-- from : multiple views in single page
https://groups.google.com/forum/#!msg/angular/CbxxbmUKa7g/ISfmiA17AFwJ
-->

<html ng:app="app">
    <head>
        
        <script type="text/javascript" src="http://ci.angularjs.org/view/AngularJS/job/angular.js-angular-master/221/artifact/build/pkg/0.10.7-230f29d0/angular-0.10.7-230f29d0.min.js">
        </script>  

        <script type="text/ng-template" id="foo.html">
            <p ng:controller="FooCtrl">{{message}}</p>
        </script>
        
        <script type="text/ng-template" id="bar.html">
            <p ng:controller="BarCtrl">{{message}}</p>
        </script>
        
        <script type="text/ng-template" id="horizontal.html">
            <div ng:controller="layoutController">
                <p>this is the {{message}} layout</p>
                <table><tr><td>
                    <ng:include src="templates.left" />
                </td><td>
                    <ng:include src="templates.right" />
                </td></tr></table>
            </div>
        </script>
        
        <script type="text/ng-template" id="vertical.html">
            <div ng:controller="layoutController">
                <p>this is the {{message}} layout</p>
                <table><tr><td>
                    <ng:include src="templates.top" />
                </td></tr><tr><td>
                    <ng:include src="templates.bottom" />
                </td></tr></table>
            </div>
        </script>
    </head>
    <body>
        <a href="#/view1">horizontal</a> | <a href="#/view2">vertical</a>
        <hr />
        <ng:include src="templates.layout" scope="" />
    </body>
</html>

JavaScript

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

app.run(function($route, $rootScope){
    $route.when('/view1', {controller: HorizontalCtrl, templates: {layout: 'horizontal.html', left:'foo.html', right:'bar.html'}});
    $route.when('/view2', {controller: VerticalCtrl, templates: {layout: 'vertical.html', top:'foo.html', bottom:'bar.html'}});
    
    $rootScope.$on('$beforeRouteChange', function(scope, newRoute){
        if (!newRoute) return;
        $rootScope.templates = newRoute.$route.templates;
        $rootScope.layoutController = newRoute.$route.controller;
    });
    
});


function FooCtrl($scope){
    $scope.message = "FOO Scope"; 
}

function BarCtrl($scope){
    $scope.message = "BAR Scrope";                    
}

function HorizontalCtrl($scope){
    $scope.message = "HORIZONTAL";
}

function VerticalCtrl($scope){ 
    $scope.message = "VERTICAL";
}