Routing III, where from we get .id?


#1

I can`t undertand where from we get url .id?

ok, here is params from PhotosController:
$scope.detail = data[$routeParams.id];

and app.js code cut:
.when('/photos/:id', {

but recieved json does not contains any ids
https://s3.amazonaws.com/codecademy-content/courses/ltp4/photos-api/photos.json


#2

Hello :slight_smile:


In the route:

.when('/photos/:id', {

we have defined a route for our PhotoController. The :id is the route parameter, it means that URL https://localhost/#/photos/3 will take us to the PhotoController with $routeParams.id equal to 3 (value from the URL).


Photos in the home view will take you to the photo view because of this part of home view:

<div class="item col-md-4" ng-repeat="photo in photos">
    <a href="#/photos/{{$index}}">
        <img class="img-responsive" ng-src="{{ photo.url }}">
        <p class="author">by {{ photo.author }}</p>
    </a>
</div>

Take a look at the href -> "#/photos/{{$index}}", {{$index}} is the index of the for ... in loop, in the first iteration it will be equal to 0, in the second to 1, etc...


id is corresponding directly to the index of the photo in the photos.json.

The first object in the photo.json is:

{
    "title": "Canada",
    "author": "Tim Gage",
    "url": "https://s3.amazonaws.com/codecademy-content/courses/ltp4/photos-api/canada.jpg",
    "pubdate": 1412208000000,
    "upvotes": 60,
    "views": 1195
}

and this is the photo you will see if you enter the address https://localhost/#/photos/0.

This mechanism is defined in the PhotoController:

$scope.detail = data[$routeParams.id];

Does it make a bit more sense now?


#3

Yes, ofcourse! you make my day! Thx a lot))


#4

You're very welcome :slight_smile: