AngularJS – Comment fonctionne l'emplacement html5Mode?

Je demande cela quelques fois maintenant, j'ai essayé de jouer avec la commande $locationProvider.html5Mode(true) avec <base href="/"> et j'ai rencontré beaucoup d'erreurs en appelant les scripts / Styles / images pour mon projet. Je suppose qu'il doit y avoir quelque chose que je fais mal, mais y at-il une certaine structure de dossier que vous devriez suivre, de sorte que vous ne rencontrez pas ces erreurs? Ou est-ce qu'il existe une façon spécifique que fonctionne la base href que je ne comprends pas très bien?

Récemment, j'ai pensé que je l'essayerais sur une très petite application. C'est effectivement un site Web statique, mais je souhaite profiter du routage d'Angular pour vous assurer que toutes les pages peuvent être chargées instantanément. Donc, ma structure serait quelque chose comme ceci:

 my-project css images js angular app.js app.routes.js mainCtrl.js views home.html about.html contact.html index.html

Donc, je sais que cette structure de dossier n'est pas géniale, mais je n'utiliserais que Angular dans ce projet pour le routage, rien de plus, donc ça correspond à mes besoins.

Je mets dans la tête <base href="/"> , placez le ng-app et ng-controller du corps, et dans le corps, placez un <div ng-view> ailleurs.

J'ai ajouté dans $locationProvider.html5Mode(true) et j'ai essayé l'application. Tous mes scripts sont alors chargés comme http://localhost:8888/script.js qui est incorrect. Le projet se trouve dans un dossier afin que index.html se trouve dans http://localhost:8888/my-project/index.html . Donc, il devrait être de charger les scripts à partir de http://localhost:8888/my-project/js/angular/app.js par exemple.

Y a-t-il quelque chose que je ne comprends pas de la base href ? Finalement, je peux héberger cette application quelque part en ligne, donc je souhaite que les URL des scripts, etc., soient pertinentes pour le fichier. Quelqu'un a-t-il des idées?

D'accord, donc au-dessus de la balise base href j'aurais mes styles CSS qui seraient liés comme css/style.css et au bas de ma balise de body j'aurais mes scripts chargés comme js/init.js ou js/angular/app.js par exemple. Cela tenterait de le charger comme si le dossier js se trouvait directement sur localhost:8888/js .

Le cadre angulaire est une application de page unique (SPA) capable de s'exécuter dans un navigateur en empirant essentiellement le navigateur en exécutant des extraits de code plutôt que sur des appels de serveur, en utilisant l'ancre de page "hash" ( # ). Normalement, une URL avec un # sauterait à un point d'ancrage spécifique dans la page; Dans le cas d'angular ou d'autres framework SPA similaires, le # est redirigé vers un segment de code à la place.

Idéalement, vous ne souhaitez pas référencer ce # dans les URL de votre page. C'est là que Html5Mode entre en jeu. Html5Mode est capable de masquer le # , en utilisant le HTML5 Push State (aka history API).

Lorsque Html5Mode est activé, les liens normaux sur la page sont remplacés en silence par Angular avec des auditeurs d'événements. Lorsque ces événements sont déclenchés, la page actuelle est enfoncée dans l'historique du navigateur et la nouvelle page est chargée. Cela donne l'illusion que vous naviguez vers une nouvelle page, et même que le bouton de retour fonctionne.

Tout va bien lorsque vous rencontrez des liens qui sont cliqués à partir de l'application en cours d'exécution, mais le fait de compter sur les auditeurs d'événements ne peut pas fonctionner si vous naviguez vers la page à partir d'une source externe, où Angular n'est pas encore chargé dans la mémoire. Pour faire face à cela, vous devez charger vos pages à partir d'un serveur Web qui prend en charge les réécritures d'URL . Lorsque le serveur reçoit une demande d'URL pour laquelle il n'y a pas de page physique, il réécrit l'URL pour charger la page HTML de base, où Angular peut être chargé et reprendre.

Lorsque Angular reçoit une demande d'itinéraire qui a été réécrit de cette manière, il doit d'abord déterminer quel était l'itinéraire prévu. C'est là que la balise HTML de Base entre en jeu. Angular utilise la référence Base pour l'aider à déterminer quelle partie de l'URL est sur le serveur et quelle partie est une route client. Essentiellement, où le # dans l'URL serait si Html5Mode n'était pas activé.

Malheureusement, Base est une balise HTML utilisée par le navigateur pour plus que seulement Angular. Le navigateur utilise également cette balise pour déterminer l'emplacement correct pour charger des scripts et des ressources en utilisant des chemins relatifs, quel que soit le chemin dans la barre de localisation. En général, ce n'est pas un problème si tous les scripts et les ressources sont relatifs à l'emplacement du fichier Index.html. Lorsque la Base est omise, le navigateur va charger des scripts à partir du chemin de base apparent déterminé par l'URI actuel. Cependant, une fois que vous l'avez fourni, le navigateur utilisera toute la valeur que vous avez fournie.

En général, à moins d'être hébergé angulaire sur une sous-page de votre site et vous souhaitez que vos utilisateurs s'attendent à quelque chose de spécifique dans la chaîne d'URL, vous devez toujours contrôler la base de votre serveur et utiliser Base="/" sur le client côté.