JSFiddle - React, Tailwind, and code Playground
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'
});
}]);