Single Page Application with jQuery

Question

How can I develop a SPA with jQuery? I did with Angularjs with the following code, but I’m having difficulties to migrate to it definitively and decided to stick with jQuery not to be late.

var myapp = angular.module('myapp', []);
myapp.config(function($routeProvider) {
$routeProvider
.when('/:acess', {
templateUrl : 'sources/default.html',
controller  : 'myapp-controll'
})
.otherwise({ redirectTo: '/welcome' });
});

myapp.controller('myapp-controll', function($scope, $routeParams) {
$scope.templateUrl = './g_c.php?a='+$routeParams.acess; 
});

This code carried my pages without leaving the original page, using #

Explaining better:

Let’s pretend there’s a file that way:

./pages/ (pasta) ----
index.html (este)   |
                     --/> home.html
                    |
                     --/> produtos.html

By clicking on Pagina inicial he has to click on the div "content" all the contents of the requested file, ie he would have to take only the home and pull him out of the briefcase pages playing all the content in the div and loading it completely.

But what? If I want to share the link, I will have to teach the user how to check up to it? Which buttons to click? This would cause the site to lose many users and access, so the answer is no!

Or Whether I provided the link http://meusite/#/produtos/ for someone, when accessing it has to click on the div "content" the content of the page produtos automatically, without having to click anything.

<div id="inicio"><a href="#/home/">Pagina inicial</a> | <a href="#/produtos/">Produtos</a> | </div>

<div id="conteudo">Oi, eu sou a pagina inicial</div>

Answer 1

Okay, approach with .load():

$(function () {
    $(window).on('hashchange', hashchanged);
    hashchanged();
});

function hashchanged() {
    var hash = location.hash.replace(/[#\/]/g, '') || 'home';
    $("#conteudo").load(hash + '.html');
}

The first part of the code will look for changes to the URL. When the URL changes ( and when you first load the page) the function hashchanged will be racing.

This function will filter the symbols # and / and use this information to load another page using .load() jQuery.

Answer 2

In pure jQuery is complicated to be done, but as you are in a hurry to accomplish, you may need not to use Angularjs itself, but to look for some simpler and faster alternative: https://github.com/c-smile/spapp

By describing the project within Github, you learn the few lines that are needed to develop the application you want (routing is done automatically, you just need to set the page name and the file url to be rendered in the menu item).