Learn

Great! A gallery of images shows up. How does it work?

  1. In app.js inside the app.config() method, we use Angular’s $routeProvider to define the application routes.
  2. We used .when() to map the URL / to to the controller HomeController and the template home.html. The HomeController uses the service js/services/photos.js to fetch the array of all photos from https://content.codecademy.com/courses/ltp4/photos-api/photos.json and stores it into $scope.photos. The home.html uses ng-repeat to loop through each item in the photos array and display each photo.
  3. Otherwise if a user accidentally visits a URL other than /, we just redirect to / using .otherwise().
  4. Now when a user visits /, a view will be constructed by injecting home.html into the <div ng-view></div> in index.html.

Instructions

1.

In app.js between the .when() and .otherwise(), add another .when() that maps the URL /photos/:id to the controller PhotoController and the template views/photo.html.

2.

Visit http://localhost:8000/ and click on a photo. A detail page about that photo should appear.

Take this course for free

Mini Info Outline Icon
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?