Angular Dynamic URLs Using RouteParams

Dynamic URLs using routeParams

What if you have a lot of users posting things to your website? Maybe your users want to have a profile, or a wall, of the things they've posted, and they want to be able to share it with their friends with a url? You can do that, no biggie!

Let's say you used

>> yo angular-fullstack:route wall

to generate a http://myapp.wherever.com/wall/ route for your users. You want a link to http://myapp.wherever.com/wall/someUsername to show a specific user's things.
Browse to /client/app/wall/wall.js and notice that it detects what URL the user is requesting before acting on it:

$routeProvider.when('/wall', …

You can customize that path to catch when a user is trying to see a profile associated with a specific username like so:

$routeProvider.when('/wall/:username', …

The colon before "username" indicates that this is a variable, which is then passed to the $routeParams module. In wall.controller.js, include $routeParams:

.controller('WallCtrl', function ($scope, $routeParams) { …

Then later on in wall.controller.js, you can see what username was requested in the URL by referring to the variable generated by $routeProvider using something like

var wallOwner = $routeParams.username;

PREVIOUS NEXT