In this section, we’ll take the first steps toward the final profile by making a page to display a user’s name and profile photo. Our eventual goal for the user profile pages is to show the user’s profile image, basic user data, and a list of microposts. We’ll complete this task, and with it the sample application, in “Following users” Chapter.
A Users resource
In order to make a user profile page, we need to have a user in the database. Happily, this problem has already been solved: in previous post, we created a User record by hand using the console
When following REST principles, resources are typically referenced using the resource name and a unique identifier. What this means in the context of users—which we’re now thinking of as a Users resource—is that we should view the user with id 1 by issuing a GET request to the URL /users/1.
We can get the routing for /users/1 to work by running a single command
The result appears in config/routes.js
We’ll use the standard trainjs location for showing a user, which is public/partials/users/show.html
public/app.js
In order to get the user show view to work, we need to define an user variable in the corresponding show action in the Users controller.
app/controllers/users_controller.js
public/controllers/users_controller.js
A Gravatar image and a sidebar
Gravatar is a free service that allows users to upload images and associate them with email addresses they control. Our plan is to define a gravatar_for directive for a given user.
public/partials/users/show.html
public/index.html
public/app.js
public/directives/gravatar_for.js
As noted in the Gravatar documentation, Gravatar URLs are based on an MD5 hash of the user’s email address. In the demo, the MD5 hashing algorithm is implemented using the angular-md5 library
public/index.html
The profile page appears above, which shows the default Gravatar image, which appears because [email protected] isn’t a real email address.
To get our application to display a custom Gravatar, we’ll use update to change the user’s email to something I control
Here we’ve assigned the user the email address [email protected], which I’ve associated with the Rails Tutorial logo
We include row and col-md-4 classes in the user show page public/partials/users/show.html