Finished steps, nothing is rendering


#1

I've completed all the steps in the project, but when I load the page, I only get the header. I'll post links to my code below.

Index.html

App.js
var app = angular.module('Top10App', []);

Controller

Shows Service

tvShow Directive - js & html



#2

Hey dude,

Are you getting any console errors at all?


#3

I am. No matter what I do, the http request fails. However, If I put that same URL in a new browser tab, it works just fine.


#4

In your tvShow.html file you did not wrote description correctly in your expression.
And you made a mistake calling your directive.js file "tvShows", instead of tvShow.


#5

Feel free to use this as a reference to your current code.

index.HTML

<!doctype html>
<html>
  <head>
      <link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
    <link href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css" rel="stylesheet" />
    <link href="css/main.css" rel="stylesheet" />
    <script src="js/vendor/angular.min.js"></script>
  </head>
  <body ng-app="Top10App">
    <div class="header">
      <div class="container">
        10
      </div>
    </div>

    <div class="main" ng-controller="MainController">
      <div class="container">
        <div class="content">

          
         
          <div ng-repeat="tv in shows">
            <div class="rank">{{$index + 1}}</div>
            <tv-show info="tv"></tv-show>
            </div>
     

        </div>
      </div>
    </div>

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

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

    <!-- Directives -->
    <script src="js/directives/tvShow.js"></script>

    <!-- Services -->
    <script src="js/services/shows.js"></script>
    
  </body>
</html>

js/app.js

var app = angular.module('Top10App', []);

MainController.js

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

js/directives/tvShow.js

app.directive('tvShow', function() {
  return {
    restrict: 'E',
    scope: {
      info: "="
    },
    templateUrl: 'js/directives/tvShow.html'
  };
});

js/directives/tvShow/html

<div class="img_container">
  <img class="img-responsive" ng-src="{{ info.series_img }}">
</div>
<h2 class="series">{{ info.series }}</h2>
<p class="genre">{{ info.genre }}</p>
<p class="run-start">{{ info.run_start }}</p>
<p class="description">{{ info.description }}</p>

js/services/shows.js

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

#6

I think you have mixed up the names of your services and directives, the directive is name tvShow and the service is named shows.


#7

I found 2 errors in your code, specifically in index.html.

Error 1: Step 3 was not followed correctly. You have the address pointing to a /directives folder, when it should go to /services.

Incorrect: <script src="js/directives/shows.js"></script>

Correct: <script src="js/services/shows.js"></script>

Error 2: Step 5 was not followed correctly. Note that the address should point to the /directives folder. Also note that the instructions said name the file 'tvShow.js,' so if you still have an issue change tvShows.js to tvShow.js just to be consistent with the instructions.

Incorrect: <script src="js/services/tvShows.js"></script>

Correct: <script src="js/directives/tvShows.js"></script>