Routage AngularJS sans le hash '#'
J'apprends AngularJS et il y a une chose qui m'énerve vraiment.
J'utilise $routeProvider pour déclarer des règles de routage pour mon application:
$routeProvider.when('/test', {
controller: TestCtrl,
templateUrl: 'views/test.html'
})
.otherwise({ redirectTo: '/test' });
mais lorsque je navigue vers mon application dans le navigateur, je vois app/#/test au lieu de app/test.
Ma question est donc la suivante: pourquoi AngularJS ajoute-t-il ce hash # aux urls? Y a-t-il une possibilité de l'éviter?
En fait, vous avez besoin du # (hashtag) pour les navigateurs non HTML5.
Sinon, ils feront simplement un appel HTTP au serveur à l'adresse href mentionnée . Le # est un ancien court-circuit de navigateur qui ne déclenche pas la demande, ce qui permet à de nombreux frameworks js de créer leur propre reroutage côté client.
Vous pouvez utiliser $locationProvider.html5Mode(true) pour indiquer à angular d'utiliser la stratégie HTML5, le cas échéant.
Voici la liste des navigateurs prenant en charge la stratégie HTML5: http://caniuse.com/#feat=history
Si vous avez activé html5mode comme d’autres l’ont dit, créez un fichier .htaccess avec le contenu suivant (ajustez-le à vos besoins):
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_URI} !^(/index\.php|/img|/js|/css|/robots\.txt|/favicon\.ico)
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ./index.html [L]
Les utilisateurs seront dirigés vers votre application lorsqu'ils entreront sur un itinéraire approprié. Votre application lira l'itinéraire et les affichera sur la "page" appropriée.
EDIT: Assurez-vous simplement qu'aucun nom de fichier ou de répertoire ne soit en conflit avec vos itinéraires.
Permet d'écrire une réponse qui a l'air simple et courte
Dans le routeur à la fin, ajoutez html5Mode (true) ;
app.config(function($routeProvider,$locationProvider) {
$routeProvider.when('/home', {
templateUrl:'/html/home.html'
});
$locationProvider.html5Mode(true);
})
Dans la tête html, ajoutez base tag
<html>
<head>
<meta charset="utf-8">
<base href="/">
</head>
merci à @plus - d'avoir détaillé la réponse ci-dessus
essayer
$locationProvider.html5Mode(true)
Plus d'infos sur $ locationProvider
Utilisation de $ location
Les informations suivantes proviennent de:
https://scotch.io/quick-tips/pretty-urls-in-angularjs-removing-the-hashtag
Il est très facile d'obtenir des URL propres et de supprimer le hashtag de l'URL dans Angular.
Par défaut, AngularJS acheminera les URL avec un hashtag Par exemple:
Il y a 2 choses à faire.
Configuration de $ locationProvider
Fixer notre base pour des liens relatifs
$ location Service
Dans Angular, le service $ location analyse l'URL dans la barre d'adresse et apporte des modifications à votre application, et inversement.
Je recommande vivement de lire les documents officiels $ Angular $ location pour avoir une idée du service de localisation et de ce qu’il fournit.
https://docs.angularjs.org/api/ng/service/$location
$ locationProvider et html5Mode
- Nous allons utiliser le module $ locationProvider et définir html5Mode sur true.
Nous le ferons lors de la définition de votre application angulaire et de la configuration de vos itinéraires.
angular.module('noHash', []) .config(function($routeProvider, $locationProvider) { $routeProvider .when('/', { templateUrl : 'partials/home.html', controller : mainController }) .when('/about', { templateUrl : 'partials/about.html', controller : mainController }) .when('/contact', { templateUrl : 'partials/contact.html', controller : mainController }); // use the HTML5 History API $locationProvider.html5Mode(true); });
Qu'est-ce que l'API Historique HTML5? C'est un moyen standardisé de manipuler l'historique du navigateur à l'aide d'un script. Cela permet à Angular de modifier le routage et les URL de nos pages sans actualiser la page. Pour plus d'informations à ce sujet, voici un bon article sur HTML5 History API:
http://diveintohtml5.info/history.html
Réglage pour les liens relatifs
- Pour créer des liens autour de votre application à l’aide de liens relatifs, vous aurez besoin de définir le
<base>dans le<head>de votre document. Cela peut être dans le fichier Root index.html de votre application Angular. Recherchez la balise<base>et Définissez-la sur l'URL racine de votre application.
Par exemple: <base href="/">
- Il existe de nombreuses autres façons de configurer cela, et le mode HTML5 Défini sur true devrait résoudre automatiquement les liens relatifs. Si votre racine De votre application est différente de l'URL (par exemple, /my-base,a ensuite utilisez-la comme base.
Repli pour les anciens navigateurs
- Le service $ location aura automatiquement recours à la méthode hashbang Pour les navigateurs qui ne prennent pas en charge l’API d’historique HTML5.
- Cela se produit de manière transparente pour vous et vous n’avez pas à configurer quoi que ce soit pour que cela fonctionne. Dans la documentation $ emplacement angulaire, vous pouvez voir La méthode de secours et son fonctionnement.
En conclusion
- C'est un moyen simple d'obtenir de jolies URL et de supprimer le hashtag dans Votre application Angular. Amusez-vous à créer ces applications angulaires super propres et superfast!
Si vous souhaitez configurer cela localement sur OS X 10.8, qui sert Angular avec Apache, vous trouverez peut-être les éléments suivants dans votre fichier .htaccess:
<IfModule mod_rewrite.c>
Options +FollowSymlinks
RewriteEngine On
RewriteBase /~yourusername/appname/public/
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_URI} !.*\.(css|js|html|png|jpg|jpeg|gif|txt)
RewriteRule (.*) index.html [L]
</IfModule>
Options + FollowSymlinks s'ils ne sont pas définis peuvent vous donner une erreur interdite dans les journaux, comme ceci:
Options FollowSymLinks or SymLinksIfOwnerMatch is off which implies that RewriteRule directive is forbidden
Une réécriture de base est requise, sinon les requêtes seront résolues à la racine de votre serveur qui, localement, n'est pas votre répertoire de projet par défaut, à moins que vous n'ayez spécifiquement configuré vos hôtes virtuels. Vous devez donc définir le chemin afin que la requête trouve le répertoire racine de votre projet. Par exemple, sur ma machine, j'ai un répertoire/Users/me/Sites où je garde tous mes projets. Comme l'ancien OS X mis en place.
En réalité, les deux lignes suivantes indiquent si le chemin d'accès n'est pas un répertoire ou un fichier. Vous devez donc vous assurer que vous n'avez aucun fichier ou répertoire identique à celui de votre chemin de route d'application.
La condition suivante indique si la demande ne se termine pas par les extensions de fichier spécifiées, ajoutez-y ce dont vous avez besoin
Et le dernier [L] dit de servir le fichier index.html - votre application pour toutes les autres demandes.
Si vous avez toujours des problèmes, consultez le journal Apache, il vous donnera probablement des astuces utiles:
/private/var/log/Apache2/error_log
Comme il a été mentionné ci-dessus, les réponses sont les suivantes:
Ajouter <base href="/"> à index.html
Activez html5mode $ location.html5Mode (true) dans app.js.
Avec cela, l'application fonctionnera bien. Mais uniquement dans les scénarios lorsque vous naviguez du fichier index.html vers d'autres pages. Par exemple, ma page de base est-www.javainuse.com. Si je clique sur le lien Java, il se dirigera correctement vers Www.javainuse.com/Java.
Cependant, si je vais directement à www.javainuse.com/Java, la page ne sera pas une erreur trouvée.
Pour résoudre ce problème, nous devons utiliser la réécriture d'URL . Dot net nécessite la réécriture d'URL pour IIS.
Si vous utilisez Tomcat, la réécriture d'URL devra être effectuée à l'aide de Tuckey . Vous obtiendrez plus d'informations sur la réécriture d'URL ici
L'utilisation du mode HTML5 nécessite une réécriture d'URL côté serveur. Vous devez donc réécrire tous vos liens vers le point d'entrée de votre application (par exemple, index.html). Exiger une balise <base> est également important dans ce cas, car cela permet à AngularJS de faire la différence entre la partie de l’url qui constitue la base de l’application et le chemin qui doit être traité par l’application. Pour plus d'informations, voir AngularJS Guide du développeur - Utilisation du mode HTML5 de l'emplacement $ Côté serveur .
Mettre à jour
Comment: configurer votre serveur pour qu'il fonctionne avec html5Mode1
Lorsque vous avez activé html5Mode, le caractère # ne sera plus utilisé dans vos URL. Le symbole # est utile car il ne nécessite aucune configuration côté serveur. Sans #, l'URL paraît beaucoup plus jolie, mais elle nécessite également des réécritures côté serveur. Voici quelques exemples:
Apache réécrit
<VirtualHost *:80>
ServerName my-app
DocumentRoot /path/to/app
<Directory /path/to/app>
RewriteEngine on
# Don't rewrite files or directories
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
# Rewrite everything else to index.html to allow html5 state links
RewriteRule ^ index.html [L]
</Directory>
</VirtualHost>
Nginx réécrit
server {
server_name my-app;
index index.html;
root /path/to/app;
location / {
try_files $uri $uri/ /index.html;
}
}
Azure IIS réécrit
<system.webServer>
<rewrite>
<rules>
<rule name="Main Rule" stopProcessing="true">
<match url=".*" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
</conditions>
<action type="Rewrite" url="/" />
</rule>
</rules>
</rewrite>
</system.webServer>
Express réécrit
var express = require('express');
var app = express();
app.use('/js', express.static(__dirname + '/js'));
app.use('/dist', express.static(__dirname + '/../dist'));
app.use('/css', express.static(__dirname + '/css'));
app.use('/partials', express.static(__dirname + '/partials'));
app.all('/*', function(req, res, next) {
// Just send the index.html for other files to support HTML5Mode
res.sendFile('index.html', { root: __dirname });
});
app.listen(3006); //the port you want to use
Dans Angular 6, avec votre routeur, vous pouvez utiliser:
RouterModule.forRoot(routes, { useHash: false })
**
Il est recommandé d'utiliser le style HTML 5 (PathLocationStrategy) en tant que stratégie de localisation en angulaire
**Parce que
- Il produit les URL propres et optimisées pour le référencement, qui sont plus faciles à comprendre et à mémoriser pour les utilisateurs de
- Vous pouvez tirer parti du rendu côté serveur, qui accélérera le chargement de notre application, en rendant les pages du serveur Avant de le livrer au client.
Utilisez Hashlocationstrtegy uniquement si vous devez prendre en charge l'ancien les navigateurs.
Vous pouvez également utiliser le code ci-dessous pour rediriger vers la page principale (home):
{ path: '', redirectTo: 'home', pathMatch: 'full'}
Après avoir spécifié votre redirection comme ci-dessus, vous pouvez rediriger les autres pages, par exemple:
{ path: 'add-new-registration', component: AddNewRegistrationComponent},
{ path: 'view-registration', component: ViewRegistrationComponent},
{ path: 'home', component: HomeComponent}