title: Understanding Jquery SPA Implementation
body: <p>I'm trying to create an SPA website with JQuery. I know how to use <code>history.pushState</code> and <code>$(window).on('popstate')</code> but i have a few questions. Currently i have a router.js file which handles the popstate event and the navigation links. I place the links in a custom attribute(data-navId="templates/page/page.html") or in href and handling it with
  <code>$(e).preventDefault();</code>
  . User clicks the link and <code>$('.page-content').load('url', function() {})</code> and <code>history.pushstate</code> are executed. </p>
  
  <blockquote>
    <p>1) Am i forced to include the router.js file containing these
    functions in every template? I want one html which contains these
    functions only. The templates should only contain HTML and their
    corresponding scripts. I managed to accomplished that but if the user
    refreshes the page the template shows without styling or anything. Is
    using a hash the answer? Or if the user closes the browser and have
    the "Restore previous pages" option activated the template will be
    load with its html only.</p>
  </blockquote>
  
  <p>In the past i developed SPA pages without hash using only <code>popstate</code> and <code>history.pushState</code> but i had to include all the html on each file and then calling <code>$('.page-content').load(url + ' .page-content &gt; *', function() {});</code> to avoid the refresh bug.</p>
  
  <p>I also know that facebook uses <code>popstate</code> for modern browsers and <code>hashchange</code> for older perhaps by including Modernizr.js or some custom library. But how the router works without including it in every template?</p>
  
  <p>Thanks in advance.</p>