JSFiddle - React, Tailwind, and code Playground

by ZachWills

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script>
<div ng-app="myApp">
    <nav class="site__navigation" ng-controller="navCtrl"> <a href="#/home" ng-class="{active: currentPage == 'Home'}">Home</a>
 <a href="#/about" ng-class="{active: currentPage == 'About'}">About</a>
    </nav>
    
    <div class="site__container">
        <div ng-view></div>
    </div>
</div>

CSS

.site__navigation a {
    text-decoration: none;
    display: inline-block;
    color: blue;
    padding: 20px;
}

a.active {
    background: blue;
    color: white;
}

JavaScript

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

myApp.config(['$routeProvider', function ($routeProvider) {
    $routeProvider.
    when('/home', {
        template: 'This is the home page.',
        controller: 'HomeCtrl',
        activePage: 'Home'
    }).
    when('/about', {
        template: 'This is the about page.',
        controller: 'AboutCtrl',
        activePage: 'About'
    }).
    otherwise({
        redirectTo: '/home'
    });
}]);

function navCtrl($scope, $routeParams) {
    $scope.currentPage = $routeParams.activePage;
}

function HomeCtrl($scope) {
}

function AboutCtrl($scope) {
}