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 class="page__wrap" ng-app="myApp">
    <nav class="site__navigation" ng-controller="navCtrl"> <a href="#/home" ng-class="{active: $route.current.activePage == 'home'}">Home</a>
 <a href="#/about" ng-class="{active: $route.current.activePage == 'about'}">About</a>

    </nav>
    <!-- .site__navigation -->
    <div class="site__container">
        <div ng-view></div>
    </div>
    <!-- .site__container -->
</div>
<!-- .page__wrap -->

CSS

body {
    background: #eee;
}
.page__wrap {
    border: 1px solid #ccc;
    padding: 25px;
    width: 90%;
    margin: auto;
    background: white;
}
.site__navigation {
    margin-bottom: 20px;
}
.site__navigation a {
    text-decoration: none;
    display: inline-block;
    color: blue;
    padding: 10px 15px;
}
a.active {
    background: blue;
    color: white;
}

JavaScript

//declare the application and it's dependecies 
var myApp = angular.module('myApp', ['ngRoute']);

//set some config options- in this case the routes!
myApp.config(['$routeProvider', function ($routeProvider) {
    //handle each route
    $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'
    });
}]);

//navCtrl definition
function navCtrl($scope, $route) {
    //we set $route to  we have access to it in the HTML
    $scope.$route = $route;
}

//empty controller we defined above
function HomeCtrl($scope) {}

//empty controller we defined above
function AboutCtrl($scope) {}