Can I use regex to reroute external URLs to a specific Angular Route?

Question

In my first attempt to figure this out I asked about setting up multiple static URLs for one $state in the following question posted here. After finding out that aliasing isnt possible with Angular, I quickly realized this would be a problem without a base to the URL as everything passed in the URL becomes a parameter and screws up the app.

So in order to solve this from another angle I figured I could reroute the incoming URL to its proper Angular counter part using regex and sting matching. The only issue with this is that I have no idea if Angular can do this and I'm terrible with regex...

So taking into account me original post and set up I have a current route that is set up like so.

 .state('ball', {
    parent: 'ballLayout',
    url: '/ball/{urlName}',
    views: {
      'cube.head': {
        templateUrl: 'partials/views/ball.head.html',
        controller: 'BallCtrl'
      }
    }
  });

The outside Rails application can have up to 4 different URL structures which all route to the same title like so

ball/title-of-page

bat/title-of-page

basket/title-of-page

beast/title-of-page

What I'd like to do is have my Angular app match up the ball, bat, basket, or beast and always route it back to ball/title-of-page.

So if someone sends out a link from the Rails side that is beast/title-of-page angular will see it and map it to to ball/title-of-page. Is this possible?

Radim Köhler · Accepted Answer · 2014-06-02 18:29:11Z

1

If I understand your issue correctly, solution could be like this (check the working plunker):

We will use the

rule() for custom url handling

and here is the snippet:

$urlRouterProvider.rule(function ($injector, $location) {

    var path = $location.path(),
        searchFor = /(ball|bat|basket|beast)/i, // the regex
        replaceWith = 'ball';

   var wasFound  = path.search(searchFor) > -1; // is there a match?

   return wasFound
   ? path.replace(searchFor, replaceWith)  // replace first occurance
   : path;

});

And now, all the url like:

  <li><a href="#/BALL/title-of-page-ball">ball</a></li>
  <li><a href="#/bat/title-of-page-bat">bat</a></li>
  <li><a href="#/basket/title-of-page-basket">basket</a></li>
  <li><a href="#/beast/title-of-page-beast">beast</a></li>

will be converted into:

href="#/ball/...."

the working plunker...

answered Jun 2, 2014 at 18:29

Radim Köhler

124k48 gold badges243 silver badges343 bronze badges

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

7 Comments

Mr. BigglesWorth Over a year ago

It appears to be doing the replace and sending the user to the correct URL however the entire app goes white screen with no data and no console info as to why. I'm wondering if it has anything to do with my set up and current config getting in the way. The full set up of my config section is as such in this plunk.

Radim Köhler Over a year ago

As I've shown in plunker, the rerouting is possible. Your specific (html5 style) solution is hard to reproduce, but at the end, it could most likely be achieved as well. In case of ui-router, the key is rule() ... if you can update your plunker to working version (for ball only) ... I can check, but currently it is just a copy/paste bin ...

Mr. BigglesWorth Over a year ago

That makes sense. I tried to remove our html5 URL structure and then went with just the normal #bang solution, but it still failed. There is probably something else going on here that I need to trouble shoot. Not having any errors is really a problem however. I'll create a working plunker today. Thanks!

Radim Köhler Over a year ago

Great, if I will know how to, I will gladly assist. The ui-router is really exceptional tool! And it would be shame if you won't get what you can from that ;)

Mr. BigglesWorth Over a year ago

As a side note: Does it matter that you are using Angular 1.3 beta if I'm still on 1.2? I'm assuming there were no major changes to core and since Im using ui-router it doesnt matter.

|

Collectives™ on Stack Overflow

Can I use regex to reroute external URLs to a specific Angular Route?

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related