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

You could inject $route service to your controller and inspect `$route.current` to get the current route. Don't need to map the url. — Khanh TO, Mar 02 '14 at 13:56
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. — Emerson Farrugia, Mar 02 '14 at 14:16
@EmersonFarrugia i actually can't understand why it doesn't works properly on each routeChangeStart it seems sometimes $route.current is not available — itsme, Mar 02 '14 at 14:35

score 25 · Accepted Answer · answered Mar 02 '14 at 14:27

25

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

answered Mar 02 '14 at 14:27

dfsq

191,768
25
236
258

why on first page load the $route.current seems not available ? while at first browsing a page it appears then available – itsme Mar 02 '14 at 14:41
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. – dfsq Mar 02 '14 at 16:01

Tome Pejoski · Answer 2 · 2014-03-02T14:03:28.170

1

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.

edited Mar 02 '14 at 14:03

answered Mar 02 '14 at 13:57

Tome Pejoski

1,582
2
10
34

why on first page load the $route.current seems not available ? while at first browsing a page it appears then available – itsme Mar 02 '14 at 14:41

score 0 · Answer 3 · answered Jul 29 '15 at 17:40

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.

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

3 Answers3

Linked