JSFiddle - React, Tailwind, and code Playground

by Jason

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.18/angular-route.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.18/angular-sanitize.min.js"></script>
<body ng-controller="AppController">
<h2 class="subnavtitle">Toolkit Menu<img src="/outdoors/naturewatch/images/gotomenu.png" width="30" height="20" alt="Go To Menu"></h2>
<ul class="subnavul">
   <a href="#/home">
  <li ng-class="{active: slug == 'home'}">Toolkit Home</li>
  </a> <a href="#/getting-started">
  <li ng-class="{active: slug == 'getting-started'}">Getting Started</li>
  </a> <a href="#/funding">
  <li ng-class="{active: slug == 'funding'}">Funding</li>
  </a> <a href="#/marketing">
  <li ng-class="{active: slug == 'marketing'}">Marketing</li>
  </a> <a href="#/administration">
  <li ng-class="{active: slug == 'administration'}">Administration</li>
  </a> <a href="#/event-day">
  <li ng-class="{active: slug == 'event-day'}">Event Day</li>
  </a> <a href="#/event-followup">
  <li ng-class="{active: slug == 'event-followup'}">Event Follow-Up</li>
  </a>
</ul>
<div class="subpagecontent" ng-view></div>
    </body>

JavaScript

var Site = angular.module('Site', ['ngSanitize','ngRoute']);
Site.config(function ($routeProvider) {
  $routeProvider
    .when('/:slug', {templateUrl: 'page.tpl.html', controller: 'RouteController'})
    .otherwise({redirectTo: '/home'});
	
}).run(["$rootScope", "$window", '$location', function($rootScope, $window,  $location) {

    $rootScope.$on('$routeChangeStart', function(evt, absNewUrl, absOldUrl){
        $window.scrollTo(0,180);    //scroll to top of page after each route change
})}]);

function AppController ($scope, $rootScope, $http) {
  // Load pages on startup
  $http.get('http://staging-www.fs.fed.us/outdoors/naturewatch/tools/toolkits/snorkeling/pages.json').success(function (data) {
    $rootScope.pages = data;
  });

  // Set the slug for menu active class
  $scope.$on('routeLoaded', function (event, args) {
    $scope.slug = args.slug;
  });
}

function RouteController ($scope, $rootScope, $routeParams) {
  // Getting the slug from $routeParams
  var slug = $routeParams.slug;

  $scope.$emit('routeLoaded', {slug: slug});
  $scope.page = $rootScope.pages[slug];
}