Single Page Application with jQuery

Question

Single Page Application with jQuery

Navigation

#1 by (4 votes)
#2 by (0 votes)

2

How can I develop a SPA with jQuery? I did with AngularJS with the following code, however I am having difficulties to migrate to it definitively and decided to keep with jQuery so as 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 loaded my pages without leaving the original page, using #

Explaining better:

Let's pretend that there is a file like this:

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

When you click on Pagina inicial it has to load into the "content" div all the contents of the requested file, ie it would have to just get the home and pull it from inside the pages folder by throwing all the content in the div and loading it completely.

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

Or if I provided the http://meusite/#/produtos/ link to someone, when accessing it, you have to load the contents of the page produtos into the "content" div 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>

javascript jquery angularjs html5 single-page-application

asked by anonymous 22.11.2014 / 22:41

2 answers

0

In pure jQuery it's complicated to do, but as you are in a hurry to perform, you may need to not use AngularJS itself, but look for some simpler and faster alternative: link

From the description of the project within GitHub, you learn the few lines that are required to develop the application you want (routing is done automatically, you just need to set the page name and url of the file to be rendered in menu item).

23.11.2014 / 00:17

Interface, Layer Interconnection How to dynamically create an element in SVG?

score 4 · Accepted Answer

Ok, 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 in the URL. When the URL changes (and when you load the page the first time) the hashchanged function will be run.

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