What did we just do?
- In app.js, we mapped a URL to
PhotoControllerandphoto.html. We added a variable part namedidto the URL, like this:/photos/:id. - In PhotoController, we used Angular’s
$routeParamsto retrieveidfrom the URL by using$routeParams.id. Notice that we injected both$routeParamsand thephotosservice into thePhotoControllerdependency array to make them available to use inside the controller. - Then to fetch an individual photo, we first used the
photosservice to fetch the array of photos from the server, and then used$routeParams.idto access the specific photo by its index. - As before, any properties attached to
$scopebecome available to use in the view. This means in photo.html, we can display the photo’sdetailusing expressions as done before.
Notice that when you click on links, the app doesn’t do a full reload. Only the part of the view specified by <div ng-view></div> changes.
Instructions
Finish the template so that it displays a photo’s details.
First, in the browser, visit https://content.codecademy.com/courses/ltp4/photos-api/photos.json. Looking at the format of the data in the array, each photo has six pieces of data - title, author, url, pubdate, upvotes, and views.
In the template photo.html, display a photo’s remaining five pieces of data. Then visit http://localhost:8000/ in the browser and click on a photo. A detail page about that photo should appear.
Use the number filter to format the views and upvotes.
Use the date filter to format the pubdate.
View the result in the browser. The photo’s views, upvotes, and date should now be formatted.