JSFiddle - React, Tailwind, and code Playground

by rcuzcano

HTML

<script src="http://angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
<div ng-app="MyApp">
    
    <div ui-view="header"></div>
    <div ui-view="side"></div>
    <div ui-view="content"></div>
    <script type="text/ng-template" id="header.html">
        header
    </script>
    <script type="text/ng-template" id="side.html">
        <a href="#" ui-sref="home">home</a>
        <a href="#" ui-sref="login">login</a>
    </script>
    <script type="text/ng-template" id="content.html">
        content
    </script>
    <script type="text/ng-template" id="login.html">
        login
    </script>
</div>

JavaScript

angular.module("MyApp", ['ui.router']);

angular.module("MyApp", ['ui.router']).config(['$stateProvider', '$urlRouterProvider',function($stateProvider, $urlRouterProvider){
    $stateProvider
        .state('home', {
            url: "/home",
            views: {
                "header": { templateUrl: 'header.html' },
                "side": { templateUrl: 'side.html' },
                "content": { templateUrl: 'content.html' }
            }
        })
        .state('login', {
            url: "/login",
            views: {
                "header": { templateUrl: 'header.html' },
                "side": { templateUrl: 'side.html' },
                "content": { templateUrl: 'login.html' }
            }
        })
    ;
        $urlRouterProvider.otherwise("/home");    
        
}]);