Compte de la casse avec angularjs ui-router

Je suis en train de construire une nouvelle application angularJS, sur la base de la AngularJS SPA modèle Visual studio (http://visualstudiogallery.msdn.microsoft.com/5af151b2-9ed2-4809-bfe8-27566bfe7d83)

il utilise l'interface utilisateur du routeur (https://github.com/angular-ui/ui-router) pour son acheminement.

cependant, il semble être sensible à la casse.

Aucune idée de comment je instruirait angulaire/ui-router pour ignorer la casse de la url paramètre?

de la casse n'a pas d'importance alors que dans l'application; cependant, si un utilisateur de saisir une url pour accéder à l'application à une page spécifique, nous devons nous assurer que about est également le même que aBouT

Acclamations

InformationsquelleAutor Darren Wainwright | 2014-02-18
  1. 30

    Vous pouvez maintenant configurer l'interface utilisateur du routeur à être sensible à la casse directement. Voici comment vous pouvez l'utiliser:

    angular.module('main', ['ui.router']);

angular.module('main').config(['$urlMatcherFactoryProvider', '$stateProvider', '$urlRouterProvider',
  function($urlMatcherFactory, $stateProvider, $urlRouter) {
    $urlMatcherFactory.caseInsensitive(true);
    $urlMatcherFactory.strictMode(false);
    $stateProvider.state('foo', {
      url: '/foo',
      template: '<b>The Foo View</b>'
    });
    $stateProvider.state('bar', {
      url: '/bar',
      template: '<b>The Bar View</b>'
    });
    $stateProvider.state('nomatch', {
      url: '/nomatch',
      template: '<b>No match found View</b>'
    });

    $urlRouter.otherwise('/nomatch');
  }
]);

    Dans la dernière version (0.2.11), c'est cassé. Un correctif a été poussé déjà qui peut être vu à Github. Alors, actuellement, la meilleure solution est de les cloner ui-router et de construire la tête de maître manuellement. Alternativement, vous pouvez simplement modifier la source manuellement jusqu'à ce que la prochaine version arrive.

    Mise à JOUR (11/18/2014):

    Une publication a été faite qui intègre le correctif à partir de ci-dessus de sorte que vous n'avez plus à tirer de la source et de construire manuellement. Vous pouvez afficher les libération sur Github ou tout simplement obtenir le la dernière version de.

    • Je trouve cette approche beaucoup mieux que les approuvé réponse, puisqu'il ne pas réécrire l'url
    InformationsquelleAutor kmkemp
  2. 15

    Suivant le lien dans les commentaires à la question initiale, j'ai été en mesure d'obtenir la réponse dont j'avais besoin.

    Avant mon $stateProvider.state(......) routes j'ai maintenant ce morceau de code:

    $urlRouterProvider.rule(function ($injector, $location) {
       //what this function returns will be set as the $location.url
        var path = $location.path(), normalized = path.toLowerCase();
        if (path != normalized) {
            //instead of returning a new url string, I'll just change the $location.path directly so I don't have to worry about constructing a new url string and so a new state change is not triggered
            $location.replace().path(normalized);
        }
        //because we've returned nothing, no state change occurs
    });

    Essentiellement, il sera toLowerCase() une url qui n'est pas en minuscules déjà.

    Une fois fait, il remplace l'url plutôt que de redirections. Continue ensuite avec une correspondance de l'état.

    • À partir de la version 0.2.12 et plus tard, ce qui peut être accompli avec une seule ligne, sans avoir à réécrire les Url. Voir @kmkemp de réponse.
    • Ageed avec@MattDeKrey faisant cela entraînera $stateChangeSuccess déclencher deux fois à cause de la réécriture de l'url. Vient de mettre $urlMatcherFactory.caseInsensitive(true); dans la fonction run()
    • StateChangeSuccess ne se déclenche pas à deux fois. Il ne se déclenche qu'une fois. Le mentionne également dans le commentaire dans le code
    • eh bien, il m'est arrivé seulement aujourd'hui, avec le code ci-dessus, à l'aide de go(état) a déclenché deux fois stateChangeSuccess un avec de minuscules toParam et une avec majuscules toParam....Commentaires de la ligne $lieu.replace().chemin d'accès(normalisé); arrêté ce beviours...
    InformationsquelleAutor Darren Wainwright
  3. 3

    Vous ne devriez pas changer la façon dont l'interface utilisateur de l'itinéraire poignées URL correspondant à accepter la casse de l'Url (qui ont des problèmes inattendus), mais vous pouvez tenter de corriger les Url pour l'utilisateur automatiquement lorsque la routes échouer.

    Lorsque l'interface utilisateur de l'itinéraire peut ne pas correspondre une URL à un itinéraire il déclenche la otherWise() de rappel. Je vais vous montrer que vous devez rediriger à l'aide de cette fonction de rappel.

    La suite fait l'hypothèse que toutes les Url de votre application doit être en minuscules.

    var stateHandler = function($urlRouterProvider)
{
    $urlRouterProvider.otherwise(function($injector, $location)
    {
        var url = $location.absUrl();
        var redirect = url.toLowerCase();
        if(url == redirect)
        {
             return;
        }
        $window.location = redirect;
    });
};

YourAngularApp.config(['$urlRouterProvider',stateHandler]);

    Si vous avez besoin de plus de contrôle, puis utiliser une regex pour sélectionner les URLs besoin de réécriture.

    • Je ne suis pas sûr de savoir comment ce vraiment diffère de la méthode que j'ai fini par utiliser (via le lien dans la question des commentaires - $urlRouterProvider.rule() - autre que la règle s'applique toutes les modifications avant de tenter de trouver une route. Où que votre solution est d'abord de vérifier tous connu des routes, la modification de l'url, puis rediriger.
    • Et par la façon dont vous souhaitez utiliser $window vs window à tout garder "au sein des" angualr.
    • Oui j'ai vu le lien dans le commentaire après que j'ai posté. J'irais avec rule()
    • ah ok 🙂 je suppose que je devrais mettre une réponse ici pour aider les autres 🙂 - je vais le faire maintenant...
    InformationsquelleAutor Reactgular
  4. -2

    Selon wiki officiel,

    https://github.com/angular-ui/ui-router/wiki/URL-Routing

    Darren réponse ressemble à droite:

    app.config(function ($urlRouterProvider) {
  //Here's an example of how you might allow case insensitive urls
   $urlRouterProvider.rule(function ($injector, $location) {
   //what this function returns will be set as the $location.url
    var path = $location.path(), normalized = path.toLowerCase();
    if (path != normalized) {
        //instead of returning a new url string, I'll just change the $location.path directly so I don't have to worry about constructing a new url string and so a new state change is not triggered
        $location.replace().path(normalized);
    }
    //because we've returned nothing, no state change occurs
});}
    InformationsquelleAutor ApiFox