Angular Dynamic URLs Using RouteParams - thelastmile/FreeCodeCamp GitHub Wiki
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;