JS Router dans single page app

Marsh Posté le 14-11-2018 à 05:43:21

Bonjour,

Je suis en train d'essayer de comprendre le fonctionnement des SPA.

Ce que j'ai fait : une page index.html qui contient un div identifié comme "app", que je viens mettre à jour en JS.

Code :

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<link rel="shortcut icon" href="#" />
<title>TEST</title>
<script type="text/javascript">
window.onload = function () {
//Au lancement de l'application, on appelle Init()
Init();
};
</script>
</head>
<body>
<div id="app">
</div>
<script type="text/javascript" src="js/router.js"></script>
<script type="text/javascript" src="js/app_r.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</body>
</html>

J'ai ensuite utilisé ce tuto pour créer un routeur : https://github.com/krasimir/navigo

Puis j'ai créé, pour commencer, 2 routes dans mon fichier app_r.js :

Code :

router
.on('/Init', function() {
//window.alert("dans le routeur INIT" );
var htmlRender =
'<div>'
+ '<label>' + T("init" ) + '</label>'
+ '<input id="keywords" type="text" placeholder=' + T("init" ) + '>'
+ '<input id="search" type="button" value=' + T("Go search" ) + ' onclick="SearchPage()"/>'
+ '</div>'
document.getElementById("app" ).innerHTML = htmlRender;
})
.resolve();
router
.on('/SearchPage', function() {
//window.alert("dans le routeur SEARCH PAGE" );
var htmlRender =
'<div>'
+ '<label>' + T("search" ) + '</label>'
+ '<input id="keywords" type="text" placeholder=' + T("your_search" ) + '>'
+ '<input id="search" type="button" value=' + T("search_action" ) + ' onclick="Init()"/>'
+ '</div>'
document.getElementById("app" ).innerHTML = htmlRender;
})
.resolve();

et j'ai 2 fonctions dans mon app_r.js :

Code :

function Init() {
//window.alert("Appel de init" );
router.navigate('/Init');
}
function SearchPage() {
//window.alert("Appel de SearchPage" );
router.navigate('/SearchPage');
}

Jusque là, tout se passe bien, lorsque je navigue vers localhost/test/index.html, je suis bien redirigé vers /Init, et que je clique sur le bouton "search" je vais bien sur /SearchPage

Par contre, mon problème se présente lorsque je saisis directement dans ma barre d'adresse localhost/test/SearchPage ou localhost/test/Init, dans ce cas, je ne passe pas par le processus de routage, et j'arrive donc sur Not Found.

Est-ce que vous voyez quelque chose à faire pour modifier ce comportement ?

Merci,

Reply

Marsh Posté le 14-11-2018 à 05:43:21

Reply

Marsh Posté le 14-11-2018 à 08:29:08

Bonjour,

Ta question fait référence au fonction même d’une SPA. Lorsque tu utilises une url directement depuis ton navigateur, la requête est envoyé directement à ton serveur. Et ce serveur, lui, ne connaît pas tes routes.

La solution classique (mais pas unique) consiste à créer un .haccess dans ton serveur en indiquant que pour toute toute autre que la racine, il faut envoyer la racine (index.html) et rajouter en paramètre l’URL cible. Comme ça quand index.html se chargera tu n’auras qu’à vérifier l’existence de se paramètre puis de rediriger la ou il faut

Dd

Reply

Marsh Posté le 20-11-2018 à 22:05:13

Bonjour,

Merci pour la réponse, en fait j'ai décidé de passer par des # plutôt que des / dans mon application, et ça fonctionne sans modifier le .htaccess.

Je ne sais pas si c'est la meilleure solution mais comme je développe une appli avec Cordova, je n'ai pas trouvé de moyen de mettre le fichier .htaccess...

Reply

JS Router dans single page app

Sujets relatifs:

Leave a Replay