Case insensitivity with angularjs ui-router

Question

I'm building a new angularJS app, based from the AngularJS SPA Visual studio template (http://visualstudiogallery.msdn.microsoft.com/5af151b2-9ed2-4809-bfe8-27566bfe7d83)

this uses ui-router (https://github.com/angular-ui/ui-router) for its routing.

however, it seems to be case sensitive.

Any idea how I would instruct angular/ui-router to ignore the case of the url parameter?

case sensitivity doesn't matter while in the app, though should a user type a url to enter the application at a specific page, we need to ensure that about is also the same as aBouT

Cheers

I think the answer here best describes the solution: stackoverflow.com/questions/14994324/… It's not a clear duplicate though. — Sergiu Paraschiv
– Sergiu Paraschiv, Commented Feb 18, 2014 at 20:51
many thanks guys. new with angular so clearly missed these :) — Darren Wainwright
– Darren Wainwright, Commented Feb 18, 2014 at 20:55

kmkemp · Accepted Answer · 2014-11-18 18:54:06Z

30

You can now configure ui-router to be case insensitive directly. Here is how you can use it:

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');
  }
]);

In the latest release (0.2.11), this is broken. A fix has been pushed already that can be seen at Github. So, currently, the best solution is to clone ui-router and build the head of master manually. Alternatively, you can just alter the source manually until the next release comes.

UPDATE (11/18/2014):

A release has now been made that incorporates the fix from above so that you no longer have to pull source and build manually. You can view the release on Github or just get the latest build.

edited Nov 18, 2014 at 18:54

answered Nov 10, 2014 at 14:56

kmkemp

1,6663 gold badges18 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

sebas2day Over a year ago

I find this approach much better than the approved answer since it won't rewrite the url

Darren Wainwright · Accepted Answer · 2014-09-19 16:45:29Z

15

Following the link in the comments to the original question, i was able to get the answer I needed.

Before my $stateProvider.state(......) routes I now have this piece of 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
    });

Essentially it will toLowerCase() a url that isn't all lowercase already.

Once done, it replaces the url rather than redirects. Then carries on with matching a state.

answered Sep 19, 2014 at 16:45

Darren Wainwright

30.8k22 gold badges87 silver badges131 bronze badges

4 Comments

Matt DeKrey Over a year ago

As of version 0.2.12 and later, this can be accomplished with a single line without rewriting the URLs. See @kmkemp's answer.

Axel Over a year ago

Ageed with@MattDeKrey doing this will result in having $stateChangeSuccess trigger twice because of the rewriting of the url. Just put $urlMatcherFactory.caseInsensitive(true); in the run() function

Darren Wainwright Over a year ago

@Axel - StateChangeSuccess won't fire twice. It only fires once. Also mentions this in the comment in the code

Axel Over a year ago

@Darren well, it happened to me just today, with the above code, using go(state) triggered twice stateChangeSuccess one with lowercase toParam and one with uppercase toParam....Commenting the line $location.replace().path(normalized); stopped this beviours...

Reactgular · Accepted Answer · 2014-09-19 16:37:02Z

3

You shouldn't change how ui-route handles URL matching to accept case insensitive URLs (that will have unexpected problems), but you can attempt to correct URLs for the user automatically when the routes fail.

When ui-route can not match a URL to a route it triggers the otherWise() callback. I'll show you have to redirect using this callback.

The following makes the assumption that all URLs for your app should be in lower case.

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]);

If you need more control, then use a regex to select which URLs need rewriting.

edited Sep 19, 2014 at 16:37

answered Sep 19, 2014 at 16:30

Reactgular

55.1k24 gold badges175 silver badges219 bronze badges

4 Comments

Darren Wainwright Over a year ago

I'm not sure how this really differs from the method I ended up using (via the link in the question comments - $urlRouterProvider.rule() - other than the rule will apply any changes before attempting to find a route. Where as your solution is first checking all known routes, then changing the url and then redirecting.

Darren Wainwright Over a year ago

And by the way - you would want to use $window vs window to keep it all 'within' angualr.

Reactgular Over a year ago

@Darren Yea I only saw the link in the comment after I posted. I'd go with rule()

Darren Wainwright Over a year ago

ah ok :) I supposed I should put an answer in here to help others :) - i'll do that now...

ApiFox · Accepted Answer · 2014-11-16 10:19:50Z

According to official wiki,

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

Darren's answer looks right:

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
});}

Collectives™ on Stack Overflow

Case insensitivity with angularjs ui-router

4 Answers 4

1 Comment

4 Comments

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

4 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related