web-dev-qa-db-fra.com

Routage vers une page HTML statique en Angular 6+

J'ai un Angular avec 3 composants pays, région, domicile. Lorsque je charge la page d'accueil, j'ai la configuration de l'itinéraire vers HomeComponent, qui contient des hyperliens pour les itinéraires. Tout fonctionne simplement très bien et se comportant comme une seule page (SPA). Maintenant, je veux ajouter une page HTML statique et la diriger vers elle. J'ai regardé la documentation Route angulaire , je n'ai pas trouvé de moyen de le faire Voici les questions que j'ai

  1. Où puis-je placer mes pages HTML statiques
  2. Comment router ces fichiers dans app-routing.module.ts

Référentiel Github: SpringTestingUI

angularangular-routingangular-router
9
Jadda

Un peu en retard sur celui-ci, je cherchais un Angular vers un générateur html statique et je suis tombé sur cela et j'ai pensé que j'allais entrer. J'ai en fait appris comment faire exactement aujourd'hui.

Une page HTML statique n'est fondamentalement pas différente d'un autre élément statique tel qu'une feuille de style ou une image, nous pouvons donc traiter ces pages exactement de la même manière.

En suivant les Documents de configuration des actifs angulaires , nous pouvons créer nos fichiers html et les référencer dans l'application via .angular-cli.json ou angular.json selon le cas.

Une chose que j'ai trouvée particulièrement utile était de pouvoir configurer manuellement le chemin de référence pour la page html lorsqu'il est résolu par le navigateur.

Par exemple, si nous avons un html dans le répertoire src/static-pages/page1.html, par défaut si vous ajoutez ce chemin à la section assets de votre angular.json, il existera à la route http://hostname/static-pages/page1.html. Angular vous permet de changer le chemin de résolution de cet actif pour qu'il soit ce que vous voulez en fournissant quelques informations supplémentaires dans la section des actifs lors du référencement de votre html statique ou autre actif.

Ex:

// angular.json

{
   ...

   "assets": [
       // This page is routed /static-pages/page1.html
       "src/static-pages/page1.html",

       // This page is routed /home/page1.html
       { "glob": "page1.html", "input": "src/static-pages/", "output": "/home/" }
   ],

   ...
}

La principale différence entre cette opération et la création d'un composant visuel qui ne rend que du HTML statique est que cela permet à un robot d'indexation Web d'indexer cette page HTML. Si vous voulez simplement rendre le texte html statique, je créerais un composant SPA supplémentaire dans Angular et ferais le routage comme d'habitude dans votre HomeComponent.

9
Tony M