AngularJS: Read route param from within controller

Question

How can a parameter from an URL be read within an AngularJS controller?

Let's say I have an URL like http://localhost/var/:value and I want the value to be stored in a variable within the controller for the /var/:value URL.

I have tried using $routeParams.value and $route.current.params.value but $routeParams is undefined at the beginning and $route doesn't work.

Solution 1

The problem is that you probably inject $routeParams or $route in a controller that is run before a route change has occurred, e.g. your main/master/page controller.

If you inject $routeParams in a controller for a specific route (specified by the controller property when you define the route), then it will work, otherwise you're probably better of listening to the various events the route service broadcasts.

Try to change your code to use

$scope.$on('$routeChangeSuccess', function (ev, current, prev) {
   // ... 
});

Solution 2

Requirements: Ensure 'ngRoute' is in your app module

Route provider set up as: http://localhost/var/:valName

Function set up as:

function functionName($scope, $routeParams){$scope.value = $routeParams.valName;}

HTML view:

{{value['valName']}}

Comments

[ctitze]

You're absolutely right, the controller is run before a route change has occurred because the client is directly calling the URL when connecting. But your posted code doesn't work because there's no route change. Any other suggestions to solve this problem?

[Martin]

If your clients hits the url directly without you letting AngularJS handle the routing then you won't be able to use $routeParams. $routeParams only work if you're using $routeProvider.when(/movies/:genre, { ... }), otherwise you have to extract the values manually. Question: are you using AngularJS routing or are you simply looking for a way to extract values from the url?

[ctitze]

I'm using AngularJS for routing because I want to load different templateUrls in my ng-view (angular-express-seed). But thanks for the answer, seems that I need to solve my problem with a different approach.

[James Eby]

Had the same issue, I was trying to reference $route.current.controller and it was undefined in a controller on the "master" page before the actual ng-view route was populated. Thanks for the explanation!