A little project I was trying out, which uses object oriented javascript to get the url hash, and find the appropriate template to render... or you could just use angular.

Page.js

function Page(urlhash) {
  'use strict';

  this.hash = {
    "value": urlhash,
    "name": ""
  }
}

Page.prototype.getHashName = function () {
  'use strict';
  var hashName;

  // Get hash string without special characters
  hashName = this.hash.value.match(/\#(.*)/);

  // If there's any hashname, get it from the resulting match array
  if (hashName) {
    hashName = hashName.pop();
  }

  // If any of these conditions are true, the page should be "main"
  if (hashName === "" || hashName === "#" || hashName === null) {
    hashName = 'main';
  }

  this.hash.name = hashName;
};

Page.prototype.getTemp = function () {
  'use strict';

  var templates, template, query;

  templates = ['main-temp', 'about-temp'];

  template = this.hash.name + '-temp';

  query = templates.indexOf(template);

  if (query !== -1) {
    this.temp = template;
  } else {
    this.temp = '404-temp';
  }
}

Page.prototype.build = function () {
  'use strict';
  this.getHashName();
  this.getTemp();
}

render.js

var renderPage = function(){
  'use strict';
  var page, temp, content, source, template, html;
  
  if(window.location.hash !== '#subscribe'){
    console.log('hi '+window.location.hash);
    
    // Create a new Page object with hash
    page = new Page(window.location.hash);
    page.build();

    // Render the page with Handlebars
    temp     = '#'+page.temp;
    content  = $(temp);
    source   = content.html();
    template = Handlebars.compile(source);
    html     = template();

    $('#site-main').html(html);
  }
}

$( document ).ready( function(){
  'use strict';
  
  renderPage();
  
  // When window hash changes...
  window.addEventListener('hashchange', renderPage);
  
});