Gestion des barres obliques de fin dans le routeur angularUI
Cela fait des heures que j'ai commencé à travailler sur ce problème et je n'arrive pas à trouver la solution.
J'ai une application qui peut entraîner des utilisateurs en tapant réellement L'URL. Dans de tels cas, il n'est pas difficile de croire que l'utilisateur peut saisir une barre oblique. Par exemple,
Www.example.com/users/2 et www.example.com/edit/company/123
Doit être traité de la même manière que
Www.example.com/users/2 / et www.example.com/edit/company/123/
Cela ne doit être fait que pour gérer le routage D'URL du côté client. Je ne suis pas intéressé par la gestion des barres obliques finales dans les appels de ressources/API. Je ne suis intéressé que par la gestion des barres obliques dans le navigateur.
J'ai donc fait des recherches et n'ai pas trouvé beaucoup de réponses sur le net. La plupart d'entre eux m'ont conduit à la section FAQ du routeur angular-ui.
Https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions
Ici ils nous disent d'écrire une règle, ce que je veux faire, mais cela ne semble pas fonctionner, ou peut-être que je le fais mal.
Voici le plunkr où j'ai ajouté mon code.
Http://plnkr.co/edit/fD9q7L?p=preview
J'ai ajouté ceci à ma configuration, le reste du code est à peu près le truc de base.
$urlRouterProvider.rule(function($injector, $location) {
//if last charcter is a slash, return the same url without the slash
if($location.$$url[length-1] === '/') {
return $location.$$url.substr(0,$location.$$url.length - 2);
} else {
//if the last char is not a trailing slash, do nothing
return $location.$$url;
}
});
Fondamentalement, je veux rendre la barre oblique finale facultative, c'est-à-dire que sa présence ou son absence sur la barre d'adresse ne devrait avoir aucun effet sur l'état charger.
5 réponses
Il y a un lien vers le travail plunker
Et c'est la définition de la règle mise à jour:
$urlRouterProvider.rule(function($injector, $location) {
var path = $location.path();
var hasTrailingSlash = path[path.length-1] === '/';
if(hasTrailingSlash) {
//if last charcter is a slash, return the same url without the slash
var newPath = path.substr(0, path.length - 1);
return newPath;
}
});
Et ces liens vont maintenant fonctionner correctement:
<ul class="nav">
<li><a ui-sref="route1">Route 1</a></li>
<li><a ui-sref="route2">Route 2</a></li>
<li><a href="#/route1/">#/route1/</a></li>
<li><a href="#/route2/">#/route2/</a></li>
<li><a href="#/route1" >#/route1</a></li>
<li><a href="#/route2" >#/route2</a></li>
</ul>
la magie pourrait être définie comme ceci: renvoyez la valeur changed s'il y a un changement... sinon ne rien faire... voir l'exemple
À partir de la version ui-router 0.2.11 vous pouvez le faire:
$urlMatcherFactoryProvider.strictMode(false);
Cela traitera les URL avec et sans barres obliques de fin de manière identique.
Je n'ai pas assez de Représentant pour un commentaire afin de faire une réponse: -
$urlMatcherFactoryProvider.strictMode(false);
Doit être avant la partie $stateProvider.state.
Salut Vous devez définir strictMode = false
Angular ui-router fournit une méthode pour cela
$urlMatcherFactoryProvider.strictMode(false);
Vous devez définir le mode strict avant d'initialiser L'état $stateProvider.state({})
urlMatcherFactoryProvider est obsolète pour v1.x de angular-ui-router.
Utiliser urlService.config.strictMode (ng1, ng2) à la place.
Il doit encore être avant $stateProvider.state().
myApp.config(function($stateProvider, $urlServiceProvider) {
var homeState = {
name: 'home',
url: '/home',
component: 'xyHome'
};
$urlServiceProvider.config.strictMode(false);
$stateProvider.state(homeState);
});