web-dev-qa-db-fra.com

Gestion des barres obliques de fin dans le routeur d'interface utilisateur angulaire

Cela fait des heures que j'ai commencé à travailler sur ce problème et je n'arrive pas à comprendre la solution.

J'ai une application qui peut amener les utilisateurs à taper l'URL. Dans de tels cas, il n'est pas difficile de croire que l'utilisateur peut entrer une barre oblique de fin. Par exemple,

www.example.com/users/2 et www.example.com/edit/company/123

doivent être traités 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 côté client. Je ne suis pas intéressé par la gestion des barres obliques de fin dans les appels de ressources/API. Je ne suis intéressé que par la gestion des barres obliques de fin dans le navigateur.

J'ai donc recherché et trouvé peu 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, c'est 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é cela à 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 de fin facultative, c'est-à-dire que sa présence ou son absence dans la barre d'adresse ne devrait avoir aucun effet sur l'état chargé.

angularjsangular-uiangular-ui-routerangular-routing
33
SLearner

Il y a un lien vers le travail plunker

Et voici la définition de 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 fonctionneront désormais 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: renvoyer la valeur modifiée s'il y a un changement ... sinon ne rien faire ... voir l'exemple

26
Radim Köhler

Depuis la version ui-router .2.11 vous pouvez le faire:

$urlMatcherFactoryProvider.strictMode(false);

Cela traitera les URL avec et sans les barres obliques de fin de manière identique.

13
othermachines

Je n'ai pas assez de représentant pour un commentaire, alors répondez: -

$urlMatcherFactoryProvider.strictMode(false);

Doit être avant le $stateProvider.state partie.

6
openJT

urlMatcherFactoryProvider est obsolète pour v1.x de angular-ui-router.

Utilisez plutôt urlService.config.strictMode ( ng1 , ng2 ).

Il doit toujours être avant $stateProvider.state().

myApp.config(function($stateProvider, $urlServiceProvider) {
  var homeState = {
    name: 'home',
    url: '/home',
    component: 'xyHome'
  };

  $urlServiceProvider.config.strictMode(false);

  $stateProvider.state(homeState);

});

1
tbmpls

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({})

Pour plus de détails, vous pouvez vous référer à ceci Lien

1
abhaygarg12493