Angular js - check if current url matches the route (with dynamic url params)

Question

i'm simply doing setting this:

app.config(['$routeProvider',function($routeProvider) {
  $routeProvider
  .when('/asd/:id/:slug',{
    templateUrl:'views/home/index.html',
    controller:'Home',
    publicAccess:true,
    sessionAccess:true
  });

:id and :slug are dynamic params.

Now i would like to check if current url matches that route (/asd/:id/:slug)

for example the url : asd/5/it-is-a-slug

which is the simplest way?

i tryed this :

$rootScope.$on('$routeChangeStart', function(){ 
   console.log($route.current); 
});

but sometimes it returns nothing in console while switching page routes

Kellar

You could inject $route service to your controller and inspect $route.current to get the current route. Don't need to map the url. – Keary

You mean in the Home controller because multiple routes could be mapped to it? As @KhanhTO said, inject $route and check $route.current.params or whatever. Though I think your code should care more about whether you have params than whether the URL matched. If completely different URLs with different meanings are hitting the same controller, you should probably use a different controller. – Marion

@EmersonFarrugia i actually can't understand why it doesn't works properly on each routeChangeStart it seems sometimes $route.current is not available – Kellar

Answer 1

Current route allows you to use regular expression. Inject $route service and explore current route object. Namely regexp part:

$route.current.regexp

This is how you can use it (example from controller method to check if current menu item (which has dynamic parts) should be activated):

$scope.isActive = function (path) {
    if ($route.current && $route.current.regexp) {
        return $route.current.regexp.test(path);
    }
    return false;
};

Abdication

why on first page load the $route.current seems not available ? while at first browsing a page it appears then available – Kellar

I think it's related to how digest cycle works. It needs to evaluate watch expression at least twice to know that it has changed. – Abdication

Answer 2

You can try something like this:

  $routeProvider.when('/asd/:id/:slug', {
    templateUrl: '/views/template.html',
    controller: 'YourController',
    resolve: {
      data: ['$route', 'SecurityFactory',
        function ($route, SecurityFactory) {

          var id= parseInt($route.current.params.id, 10);
          var slug= $route.current.params.slug;

          SecurityFactory.checkParams(id, slug);
        }
      ]
    }
  });

Then inside the SecurityFactory you can check the validity of the params. For example with RegExp.

Balcom

why on first page load the $route.current seems not available ? while at first browsing a page it appears then available – Kellar

Answer 3

Not a very elegant solution, and I have only tested it in Chrome DevTools, but it seems to work:

Object.getPrototypeOf($route.current) === $route.routes['/asd/:id/:slug'];

It seems that the routes property of the $routes service is an object literal with the keys set to the patterns for each route.

For others wanting to use this, just replace '/asd/:id/:slug' with the pattern that you used when you defined your route.

Also if you want to match the otherwise path, just use $route.routes['null']

Disclaimer: This is just a workaround that I found and which works for me. Given that this behavior is not documented, and that I didn't test it to see if it works in all scenarios, use it at your own risk.

Square