2

Como posso desenvolver uma SPA com jQuery? Fiz com AngularJS com o seguinte código, porém estou tendo dificuldades para migrar para ele em definitivo e decidi me manter com jQuery para não me atrasar.

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; 
});

Este codigo carregava minhas paginas sem precisar sair da pagina original, usando #

Explicando melhor:

Vamos fingir que existe um ficheiro dessa forma:

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

Ao clicar na Pagina inicial ele tem que carregar na div "conteudo" todo o conteudo do arquivo solicitado, ou seja ele teria que pegar apenas o home e puxar ele de dentro da pasta pages jogando todo o conteudo na div e o carregando por completo.

Mas e ai? se eu quiser compartilhar o link, vou ter que ensinar ao usuario como checar ate ele? Quais botoes clicar? Isso faria com que o site perdesse muitos usuarios e acesso, entäo a resposta é näo!

Ou Seja se eu fornecesse o link http://meusite/#/produtos/ para alguém, ao acessar ele tem que carregar na div "conteudo" o conteúdo da pagina produtos automaticamente, sem precisar clicar em nada.

<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>
4
  • Que linguagem tem no lado do servidor?
    – Sergio
    22/11/2014 às 21:47
  • Uso PHP para tratar meus dados no servidor. 22/11/2014 às 21:51
  • Está tarde para mim (fuso Europeu). Apaguei a minha resposta pois ficou claro depois da sua ultima explicação que precisa de usar o .load(). Vou juntar a sua info na pergunta. Começo a perguntar-me se não seria melhor usar o Angular mesmo e aprender melhor como ele funciona?
    – Sergio
    22/11/2014 às 23:06
  • Angular é complicado para mim, eu ate aprenderia mas o tempo é curto. Nao seria possivel o que expliquei em jQuery? @Sergio 22/11/2014 às 23:09

2 Respostas 2

7

Ok, abordagem com .load():

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

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

A primeira parte do código vai procurar mudanças no URL. Quando o URL mudar ( e quando carrega a página a primeira vez) a função hashchanged vai ser corrida.

Essa função vai filtrar os simbolos # e / e usar essa informação para carregar outra página usando o .load() do jQuery.

4
  • Perfeito! Pensei que fosse de certa forma mais complicado, esta função entao estaria realizando o conceito de SPA? @Sergio 23/11/2014 às 1:30
  • @user3163662 SPA quer dizer aplicação de página única, este código faz isso. Porem o Angular seria mais completo (e complexo talvez).
    – Sergio
    23/11/2014 às 10:27
  • @user3163662 experimentou a minha resposta? Se tem provlemas com esse plugin faça uma pergunta acerca dele referindo qual a parte que não consegue pôr a funcionar. Se quer uma solução simples acho que a minha resposta chega. Acho que a esta altura já tinha aprendido a usar o Angular e fazer aquilo que o Angular é bom a fazer.
    – Sergio
    23/11/2014 às 15:33
  • 1
    seu código funcionou perfeitamente, nao valeria a pena alterar todas minhas funçoes pro angulaejs apenas pra ter a SPA sendo que com jQuery conseguimos perfeitamente. Obrigado! 23/11/2014 às 16:06
0

Em jQuery puro é complicado de ser feito, mas como você tem pressa em realizar, talvez seja necessário não utilizar o AngularJS em si, mas procurar por alguma alternativa mais simples e rápida: https://github.com/c-smile/spapp

Pela descrição do projeto dentro do GitHub, você aprende as poucas linhas que são necessárias para desenvolver a aplicação que você deseja (o roteamento é feito automaticamente, você só precisa definir o nome da página e a url do arquivo a ser renderizado no item do menu).

1
  • a pergunta é específica para jQuery, infelizmente essa resposta não responde à pergunta :/
    – Machado
    13/07/2017 às 17:20

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .