Routage AngularJS sans le dièse '#' (en anglais)

Question

Je suis en train d'apprendre AngularJS et il y a une chose qui m'agace vraiment.

J'utilise $routeProvider pour déclarer les règles de routage de 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 de savoir pourquoi AngularJS ajoute ce hash # aux urls ? Est-il possible de l'éviter ?

Answer 1

Si vous souhaitez configurer ceci localement sur OS X 10.8 en utilisant Angular avec Apache, vous pouvez trouver ce qui suit 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>

L'option +FollowSymlinks, si elle n'est pas activée, peut entraîner une erreur interdite dans les journaux :

Options FollowSymLinks or SymLinksIfOwnerMatch is off which implies that RewriteRule directive is forbidden

La base de réécriture est nécessaire, sinon les requêtes seront résolues vers la racine de votre serveur qui, localement, par défaut, n'est pas le répertoire de votre projet, à moins que vous n'ayez spécifiquement configuré vos hôtes virtuels, de sorte que vous devez définir le chemin de sorte 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 dans l'ancienne configuration d'OS X.

Les deux lignes suivantes indiquent si le chemin n'est pas un répertoire ou un fichier, vous devez donc vous assurer que vous n'avez pas de fichiers ou de répertoires identiques aux chemins d'accès de votre application.

La condition suivante indique que la demande ne se termine pas avec les extensions de fichiers spécifiées ; ajoutez donc ce dont vous avez besoin à cet endroit.

Et le [L] dernier dit de servir le fichier index.html - votre application pour toutes les autres requêtes.

Si vous rencontrez toujours des problèmes, consultez le journal d'apache, il vous donnera probablement des indications utiles :

/private/var/log/apache2/error_log

Answer 2

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}