AngularJS: $routeParams in a SPA

In Angular, there’s a service called $routeParams which takes a combination of the $location services search() and path() methods and allows the URI of the current $location to be picked apart and used as variables. The $routeParams service is dependent on the ngRoute module. My explanation isn’t that grand, but check it out in action below!

To start off using the $routeParams, you’ll first need to inject ‘ngRoute’ into the app’s main module.

var app = angular.module(‘app’, [‘ngRoute’]);

Next, the routes need to be configure to use the route parameters. This us done using the  ‘:’ syntax in the $routeProvider’s first parameter, the route. This will define the route parameter.

 $routeProvider.when('/dire', { templateUrl: 'partials/directory.html' });

$routeProvider.when('/dire/:user', { templateUrl: 'partials/userDetails.html' });

The first route will take users to a list of users ( I originally wanted it to be ‘/directory’… but for some reason the routes didn’t show… so I changed it to ‘/dire’ for short… don’t judge me). The second route makes use of the ‘:’ syntax which allows the route to vary and also be pulled out using $routeParams[“user”] in the controller which can be used to define a variable or passed into an $http request.

Next, a simple controller for each page that is being routed to. Each controller gets $location injected into it, but $routeParams only gets injected into the userDetailsController. ( Don’t mind the $http being injected into the directoryController… I forgot to remove that ).

20150310_routeParams_Controllerws

The directoryController contains a simple array of users and a function for changing the $location which passes in the selected user as the parameter for the route. The userDetailsController takes defines $scope.user to equal the ‘user’ $routeParam (remember the ‘/dire/:user’ route? this is how we make use of the :user part).

To bring everything together, a couple simple views are in order. The page that will display the ‘directory’ ( or ‘dire’ in this case >.> ) will just display buttons with each users name. Ng-Click will allow the use of the chooseName function, it passes in the user’s first name.

<div ng-controller="directoryController" style="padding-right:10px;">
<label>Choose a person from the list below</label>
<button class="btn btn-info btn-block" ng-repeat="user in users" ng-click="chooseName(user.firstName)">{{user.firstName}}</button>
</div>

The second view uses an expression to display the route’s parameter.

<div ng-controller="userDetailsController">
<label>The Route Parameter</label>
{{user}}
</div>

Here’s what the final results look like:

20150310_routeParams_directoryView

20150310_routeParams_userDetailView

Now, this was a very crude example of using $routeParams BUT it should (if I was clear in explaining how it works…) help to start seeing different ways you can use it to you own benefit as it’s a very useful tool.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s