Help! Answer Is Not Rendering! Angler JS project Top10


#1



Angler JS project Top10

There Are no error messages but the veiw only show 10.

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>

MainController.js

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

<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>

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

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;
  });
  
}]);

app.js

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

#2

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.