Forum |  HardWare.fr | News | Articles | PC | Prix | S'identifier | S'inscrire | Aide | Shop Recherche
1627 connectés 

  FORUM HardWare.fr
  Programmation
  Javascript/Node.js

  JS Router dans single page app

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

JS Router dans single page app

n°2324106
Tibar
Posté le 14-11-2018 à 05:43:21  profilanswer
 

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 :
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  5.     <meta name="format-detection" content="telephone=no">
  6.     <meta name="msapplication-tap-highlight" content="no">
  7.     <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
  8.     <link rel="shortcut icon" href="#" />
  9.     <title>TEST</title>
  10.     <script type="text/javascript">
  11.         window.onload = function () {
  12.             //Au lancement de l'application, on appelle Init()
  13.             Init();
  14.         };
  15.     </script>
  16. </head>
  17. <body>
  18. <div id="app">
  19. </div>
  20.     <script type="text/javascript" src="js/router.js"></script>
  21. <script type="text/javascript" src="js/app_r.js"></script>
  22.     <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
  23.     <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  24. </body>
  25. </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 :
  1. router
  2. .on('/Init', function() {
  3.  //window.alert("dans le routeur INIT" );
  4.  var htmlRender =
  5.  '<div>'
  6.         + '<label>' + T("init" ) + '</label>'
  7.         + '<input id="keywords" type="text" placeholder=' + T("init" ) + '>'
  8.         + '<input id="search" type="button" value=' + T("Go search" ) + ' onclick="SearchPage()"/>'
  9.         + '</div>'
  10.  document.getElementById("app" ).innerHTML = htmlRender;
  11. })
  12. .resolve();
  13. router
  14. .on('/SearchPage', function() {
  15.  //window.alert("dans le routeur SEARCH PAGE" );
  16.  var htmlRender =
  17.  '<div>'
  18.         + '<label>' + T("search" ) + '</label>'
  19.         + '<input id="keywords" type="text" placeholder=' + T("your_search" ) + '>'
  20.         + '<input id="search" type="button" value=' + T("search_action" ) + ' onclick="Init()"/>'
  21.         + '</div>'
  22.  document.getElementById("app" ).innerHTML = htmlRender;
  23. })
  24. .resolve();


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

Code :
  1. function Init() {
  2. //window.alert("Appel de init" );
  3. router.navigate('/Init');
  4. }
  5. function SearchPage() {
  6. //window.alert("Appel de SearchPage" );
  7. router.navigate('/SearchPage');
  8. }


 
 
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,
 
 
 

mood
Publicité
Posté le 14-11-2018 à 05:43:21  profilanswer
 

n°2324109
dede_sav
Posté le 14-11-2018 à 08:29:08  profilanswer
 

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

n°2324533
Tibar
Posté le 20-11-2018 à 22:05:13  profilanswer
 

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...


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  Javascript/Node.js

  JS Router dans single page app

 

Sujets relatifs
code HTML d'un bouton bas / haut de page dans Google site[JS][RESOLU] e not defined sur Mozilla
[JS] formulaire de modification de données XML avec XPathforcer un code CSS sur une page web
[PHP / JS] Récupérer ligne txtAfficher les résultats aléatoires sur page html ->innerHTML
script vérification + redirection vers autre page[JS]Traitement d'une variable pouvant être un tableau ou pas
Attendre le chargement d'une nouvelle page après clickInstallation imprimante réseau via page web
Plus de sujets relatifs à : JS Router dans single page app


Copyright © 1997-2018 Hardware.fr SARL (Signaler un contenu illicite) / Groupe LDLC / Shop HFR