I can't make Routing tutorial work for me. Please help

Language Help Angular.js
1

The photo detail information is not showing in the view. I have checked my code against the one in GitHub and it looks exactly the same. What are the usual suspects in these cases? In other words, what’s the first place where I should look for errors?

This is app.js:

var app = angular.module('GalleryApp', ['ngRoute']);
app.config(function($routeProvider) {
  $routeProvider
      .when('/', {
        controller: "HomeController",
        templateUrl: "views/home.html"
  })
      .when('/photos/:id', {
        controller: "PhotoController",
        templateUrl: "views/photo.html"
  })
      .otherwise( {
        redirectTo: '/'
  });
});

This is photo.html:

<div class="photo">
  <div class="container">
    <img ng-src="{{ detail.url }}">
    <h2 class="photo-title">{{photo.title}} </h2>
    <p class="photo-author">{{photo.author}}</p>
    <p class="photo-views">{{photo.views|number}}</p>
    <p class="photo-upvotes">{{photo.upvotes|number}}</p>
    <p class="photo-pubdate">{{photo.pubdate|date}}</p>
  </div>
</div>

This is home.html

<div class="main">
  <div class="container">

    <h2>Recent Photos</h2>
    <div class="row">
      <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>
    </div>

  </div>
</div>

This is index.html

<!doctype html>
<html>
  <head>
    <link href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css" rel="stylesheet" />
    <link href='https://fonts.googleapis.com/css?family=Roboto:400,500,300' rel='stylesheet' type='text/css'>
    <link href="css/main.css" rel="stylesheet" />

    <!-- Include the core AngularJS library -->
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>

    <!-- Include the AngularJS routing library -->
    <script src="https://code.angularjs.org/1.2.28/angular-route.min.js"></script>
  </head>
  <body ng-app="GalleryApp">

    <div class="header">
      <div ng-view></div>
      <div class="container">
        <a href="/#/">
          <img src="img/logo.svg" width="80" height="80"> &#12501; &#65387; &#12488; &#12501; &#65387; &#12488;
        </a>
      </div>
    </div>



    <!-- Modules -->
    <script src="js/app.js"></script>

    <!-- Controllers -->
    <script src="js/controllers/HomeController.js"></script>
    <script src="js/controllers/PhotoController.js"></script>

    <!-- Services -->
    <script src="js/services/photos.js"></script>

  </body>
</html>

HomeController.js

app.controller('HomeController', ['$scope', 'photos', function($scope, photos) {
  photos.success(function(data) {
    $scope.photos = data;
  });
}]);

PhotoController.js

app.controller('PhotoController', ['$scope', 'photos', '$routeParams', function($scope, photos, $routeParams) {
  photos.success(function(data) {
    $scope.detail = data[$routeParams.id];
  });
}]);

photos.js

app.factory('photos', ['$http', function($http) {
  return $http.get('https://s3.amazonaws.com/codecademy-content/courses/ltp4/photos-api/photos.json')
         .success(function(data) {
           return data;
         })
         .error(function(data) {
           return data;
         });
}]);

Thanks much.

2 
<div class="photo">
  <div class="container">
    <img ng-src="{{ detail.url }}">
    <h2 class="photo-title">{{photo.title}} </h2>
    <p class="photo-author">{{photo.author}}</p>
    <p class="photo-views">{{photo.views|number}}</p>
    <p class="photo-upvotes">{{photo.upvotes|number}}</p>
    <p class="photo-pubdate">{{photo.pubdate|date}}</p>
  </div>
</div>

try like this:

<div class="photo">
  <div class="container">
    <img ng-src="{{ detail.url }}">
    <h2 class="photo-title"> {{ detail.title }} </h2>
    <p class="photo-author"> {{ detail.author }}</p>
    <p class="photo-views"> {{ detail.views }}</p>
    <p class="photo-upvotes"> {{ detail.upvotes }}</p>
    <p class="photo-pubdate"> {{ detail.pubdate | date }}</p>
  </div>
</div>
2 Likes
3

I’m having the same problem. No details appear when I click on a photo.

4

I am also having a problem. All I see are weird characters that do not look like English. My code is passing but I can’t see anything.

2 Likes
5

Similarly having problems. The same, no details appear when clicking photos. Earlier in the tutorial, the gallery of images didn’t appear after the correct code. So I reset the code and files and it worked again. So perhaps you can try that along with refreshing browser. Otherwise, it seems like a new tutorial so perhaps the kinks just haven’t been worked out yet.

3 Likes
6

This is indeed “detail” and not “photo”
switch it up and then refresh browser - worked for me.

2 Likes
7

Resetting the exercise files worked for me as well.

8

In case anyone is wondering why we use detail.title and not photo.title:

Scopes provide context against which expressions are evaluated. If you check the controllers, you will find $scope.photos = data for HomeController and that is why photo.author is used for home.html. Its photo and not photos since the ng-repeat directive is utilized in the html page

$scope.detail = data is for the PhotoController and the ng-repeat directive is not used in the html page reason being that $routeParams is used in the PhotoController. Hope this makes sense

3 Likes
9

If you find the words etc are not showing up in the app despite the last instruction being completed, simply click Next and then Back in order for the app to reload

1 Like
10

If you find the words etc are not showing up in the app despite the last instruction being completed, simply click Next and then Back in order for the app to reload

Thanks! That worked for me. Whew!

11

Hi,

may App product based, one product page, second is product list, thrd is product details page. i have same problem face in $routeParams.id,

myApp.factory(‘listInfo’, [’$http’, function ($http){
var listInfo = {};
listInfo.get = $http.get(‘http://localhost/hotel/himachal/data/state.json’).then(function(resp){
return resp.data;
});

listInfo.all = function(){
	return listInfo.get;
};
return listInfo;

}])

//product
.controller(‘hotelListController’, [’$scope’,‘listInfo’, function ($scope,listInfo) {
listInfo.all().then(function(resp) {
$scope.items = resp;

});
   
}]);
//product list
myApp.controller('hotelDatailController',['listInfo','$scope','$http','$routeParams', function(listInfo,$scope,$http,$routeParams){
//json data
 listInfo.all().then(function(resp) {
    $scope.items = resp[$routeParams.id];
			//console.log(resp[$routeParams.id])   

    
});

}]);
//product details
myApp.controller(‘moreDatailController’,[’$scope’,’$http’,’$routeParams’,’$log’, function($scope,$http,$routeParams,$log){
$http({
url:“http://localhost/hotel/himachal/data/state.json”,
method:‘get’,
params:{id: $routeParams.id}
}).then(function(response){
$scope.moreDetails =response.data[0];

		$log.debug(response.data);
	});

}]);

12

In my case, on the file service: “photos.js” has statement:

 $http.get('http://s3.amazonaws.com/codecademy-content/courses/ltp4/photos-api/photos.json')

you need change to:

 $http.get('https://s3.amazonaws.com/codecademy-content/courses/ltp4/photos-api/photos.json')

My problem has been resolved.

7 Likes
13

Excellent! Finally I’m seeing some images in my app. I was wondering why all steps passed, but nothing showed up.