JSFiddle - React, Tailwind, and code Playground

by Sajeetharan Sinnathurai

HTML

<script src="https://code.angularjs.org/1.2.1/angular-route.js"></script>
<div ng-app="myApp">
  <a href="#/firstPanel">1Panel</a>
  <a href="#/secondPanel">2Panel</a>
  <div ng-include src="'main.html'"><div>
  <div ng-view></div>

  <script type="text/ng-template" id="first_panel.html">
    First Panel
  </script>
  <script type="text/ng-template" id="second_panel.html">
    Second Panel
  </script>
  <script type="text/ng-template" id="main.html">
    
    <div ng-controller="MainCtrl as mainCtrl">
        Main {{mainCtrl.foo}} <br/>
        <input type="text" ng-model="mainCtrl.foo"/>
         <br/>
    </div>
  </script>
</div>

JavaScript

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

var my = {};

my.MainCtrl = function() {
  this.foo = 'Hahaaaaa';
}

my.SecondPanelCtrl = function() {
}

my.FirstPanelCtrl = function() {
}

var routeProvider = function($routeProvider) {
  $routeProvider.
      when('/firstPanel', {
        templateUrl: 'first_panel.html',
        controller: 'FirstPanelCtrl',
        controllerAs: 'firstPanelCtrl'
      }).
      when('/secondPanel', {
        templateUrl: 'second_panel.html',
        controller: 'SecondPanelCtrl',
        controllerAs: 'secondPanelCtrl'
      }).
      otherwise({redirectTo: '/firstPanel'});
};

myApp.config(routeProvider);

// register all controllers
myApp.controller('MainCtrl', my.MainCtrl);

myApp.controller('FirstPanelCtrl', my.FirstPanelCtrl);
myApp.controller('SecondPanelCtrl', my.SecondPanelCtrl);