CODEWITHSUNDEEP
regexangularjsangular-ui-router
Mr. BigglesWorth
Mr. BigglesWorth

Reputation: 1540

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

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?

Upvotes: 0

Views: 148

Answers (1)

Radim Köhler
Radim Köhler

Reputation: 123901

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...

Upvotes: 1

Related Questions