Step 5 won't run


#1

I am stuck on step 5. I compared my code to the other topic about step 5 in this forum and everything looks the same. The console is giving me an error that I have an unexpected token < in my programListing.html file. I looked over that code and I can't find anything out of place. Any help would be appreciated. I feel like it is something small since it appears the angular app is loading, it just isn't displaying the program information on the screen. Here is my code. I am listing the programListing first since everything else ran fine when this code was part of the index.html

programListing.html

<div class="row">
            
  <div class="col-md-3 series_img"><img src="{{ listing.series_img }}"/>
            </div>
            
            <div class="col-md-6">
              <h1 class="series">{{ listing.series }}</h1>
              <h2 class="episode">{{ listing.episode }}</h2>
              <p class="description">{{ program.description }}</p>
            </div>

            <div class="col-md-3">
              <ul class="list-group">
                <li class="list-group-item"><span>Date: {{ listing.datetime|date }}</span>  </li>
                <li class="list-group-item"><span>On air: {{ listing.datetime|date:'EEEE' }}</span>  </li>
                <li class="list-group-item"><span>Time: {{ listing.datetime|date:'shortTime' }}</span>  </li>
                <li class="list-group-item"><span>Season: {{ listing.season }}</span>  </li>
                <li class="list-group-item"><span>Genre: {{ listing.genre }}</span>  </li>
              </ul>
            </div>
            
</div>

here is the rest just in case it is needed

programListing.js

app.directive('programListing', function($scope){
  return{
    restrict: 'E',
    scope: {
      listing: '='
    },
    templateUrl: 'js/directives/programListing.html'
  };
  
});

MainController

app.controller('MainController', ['$scope', function($scope) {
  $scope.program = {
    series: "Sherlock", 
    series_img: "img/sherlock.jpg", 
    genre: "Crime drama", 
    season: 3, 
    episode: "The Empty Hearse", 
    description: "Two years after his reported Reichenbach Fall demise, Sherlock, who has been cleared of all fraud charges against him, returns with Mycroft's help to a London under threat of terrorist attack. John has moved on and has a girlfriend, Mary Morstan. Sherlock enlists Molly to assist him, but when John is kidnapped by unknown assailants and is rescued by Sherlock and Mary, John returns to help find the terrorists and an underground plot to blow up the Houses of Parliament during an all night sitting on Guy Fawkes Night.", 
    datetime: new Date(2014, 11, 31, 21, 00, 00, 00)
  };
  
}]);

app.js

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

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=Oxygen:300,400,700' rel='stylesheet' type='text/css'>
      <link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
    <link href="css/main.css" rel="stylesheet" />
    <script src="js/vendor/angular.min.js"></script>
  </head>
  <body ng-app="BoltNetworkApp">
    <div class="header">
      <div class="container">
        <img src="img/logo.svg" width="180" height="34">
      </div>
    </div>

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

    <div class="footer">
      <div class="container">
        <div class="row">
          <div class="col-md-3">
            <h3>Bolt</h3>
            <ul>
              <li>Careers</li>
              <li>Terms</li>
              <li>Help</li>
            </ul>
          </div>
          <div class="col-md-3">
            <h3>More Bolt</h3>
            <ul>
              <li>Gift Cards</li>
              <li>Trailers</li>
            </ul>
          </div>
          <div class="col-md-3">
            <h3>News</h3>
            <ul>
              <li>Blog</li>
              <li>Twitter</li>
              <li>YouTube</li>
              <li>Google+</li>
              <li>Facebook</li>
            </ul>
          </div>
        </div>
      </div>
      </div>
    </div>
    <!-- Modules -->
    <script src="js/app.js"></script>

    <!-- Controllers -->
    <script src="js/controllers/MainController.js"></script>
      
      <!-- Directives -->
      <script src="js/directives/programListing.html"></script>
  </body>
</html>

Thanks in advance!


#2

Update, fixed one problem in the index.html file. The directives script call now references the programListing.js file instead of the programListing.html file.

That being said, I'm still having troubles.


#3

I found two errrors.

Error 1: In index.html, specifically the directives section, you reference, <script src="js/directives/programListing.html"></script>. You used .html instead of .js.

Before: <script src="js/directives/programListing.html"></script>
After (Solution):<script src="js/directives/programListing.js"></script>

Error 2: In index.html, the div <div ng-controller="MainController" class="main"> spans the footer section (<div class="footer">). The divs should be fixed.


#4

I did not put this $scope in my function and it worked


#5

Here is my code, and this should work but it does not locally, on the codecademy site. This is not helpful for someone trying to learn this staff.















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

<div class="footer">
  <div class="container">
    <div class="row">
      <div class="col-md-3">
        <h3>Bolt</h3>
        <ul>
          <li>Careers</li>
          <li>Terms</li>
          <li>Help</li>
        </ul>
      </div>
      <div class="col-md-3">
        <h3>More Bolt</h3>
        <ul>
          <li>Gift Cards</li>
          <li>Trailers</li>
        </ul>
      </div>
      <div class="col-md-3">
        <h3>News</h3>
        <ul>
          <li>Blog</li>
          <li>Twitter</li>
          <li>YouTube</li>
          <li>Google+</li>
          <li>Facebook</li>
        </ul>
      </div>
    </div>
  </div>
</div> 
<!-- Modules -->
<script src="js/app.js"></script>
<!-- Controllers -->
  <script src="js/controllers/MainController.js"></script>
  <!-- Directives -->
  <script src="js/directives/programListing.js"></script>


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

app.directives("programListing", function($scope){
return {
restrict: 'E',
scope: {
listing: '='
},
templateUrl: "js/directives/programListing.html"
};
})

        <div class="col-md-3" class="series_img"><img ng-src="{{listing.series_img}}"/>
        </div>

        <div class="col-md-6">
          <h1 class="series">{{ listing.series }}</h1>
          <h2 class="episode">{{listing.episode}}</h2>
          <p class="description">{{listing.description}}</p>
        </div>

        <div class="col-md-3">
          <ul class="list-group">
            <li class="list-group-item"><span>Date:</span>{{listing.datetime | date}}  </li>
            <li class="list-group-item"><span>On air:</span>{{listing.datetime | date:'EEEE'}}  </li>
            <li class="list-group-item"><span>Time:</span>{{listing.datetime | date:'h:mm a'}}  </li>
            <li class="list-group-item"><span>Season:</span>{{listing.season}}  </li>
            <li class="list-group-item"><span>Genre:</span>{{listing.genre}}  </li>
          </ul>
        </div>

#6

I am having large issues with angularJS. I can't figure out things from time to time, and I would type someone's solved code WORD FOR WORD and it won't work for me... at this point, i'm just giving up on this lesson and wait till I go to school in the Fall because I have a feeling this might be riddled with bugs. of course I could definitely be wrong. Maybe it is because i'm using chrome. I think I give up on it. things are going great and then I start a projrect and no magic happens. Actually I had things disappear from rerouting code to the directive.


#7

I have the same problem.


#8

The following code works for me in the codecademy site:

index.html














<div class="main" ng-controller='MainController'>
  <div class="container">
    <div class="content">
      
      <program-listing listing="program"></program-listing>
      
      <program-listing listing="arrested_development"></program-listing>      
    </div>
  </div>
</div>

<div class="footer">
  <div class="container">
    <div class="row">
      <div class="col-md-3">
        <h3>Bolt</h3>
        <ul>
          <li>Careers</li>
          <li>Terms</li>
          <li>Help</li>
        </ul>
      </div>
      <div class="col-md-3">
        <h3>More Bolt</h3>
        <ul>
          <li>Gift Cards</li>
          <li>Trailers</li>
        </ul>
      </div>
      <div class="col-md-3">
        <h3>News</h3>
        <ul>
          <li>Blog</li>
          <li>Twitter</li>
          <li>YouTube</li>
          <li>Google+</li>
          <li>Facebook</li>
        </ul>
      </div>
    </div>
  </div>

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

<!-- Controllers -->
<script src="js/controllers/MainController.js"></script>
  <!-- Directives  -->
<script src="js/directives/programListing.js"></script>
  
</div>


MainController

app.controller('MainController', ['$scope', function($scope) {
  $scope.program = 
    { 
    series: "Sherlock", 
    series_img: "img/sherlock.jpg", 
    genre: "Crime drama", 
    season: 3, 
    episode: "The Empty Hearse", 
    description: "Two years after his reported Reichenbach Fall demise, Sherlock, who has been cleared of all fraud charges against him, returns with Mycroft's help to a London under threat of terrorist attack. John has moved on and has a girlfriend, Mary Morstan. Sherlock enlists Molly to assist him, but when John is kidnapped by unknown assailants and is rescued by Sherlock and Mary, John returns to help find the terrorists and an underground plot to blow up the Houses of Parliament during an all night sitting on Guy Fawkes Night.", 
    datetime: new Date(2014, 11, 31, 21, 00, 00, 00) 		
  	};
  
  
  $scope.arrested_development = 
    {
    series: "Arrested Development",
    series_img: "https://s3.amazonaws.com/codecademy-content/projects/4/bolt-network-2/img/arrested_development.jpg",
    genre: "Sitcom",
    season: 2,
    episode: "Righteous Brothers",
    description: "The model home collapses. Tobias and Kitty head to Las Vegas together.",
    datetime: new Date(2014,11,31,23,00,00,00)
  	}; 
 }
]);

programListing.html

<div class="row">
  <div class="col-md-3" class="series_img">
    <img ng-src="{{listing.series_img}}">
  </div>
  <div class="col-md-6">
    <h1 class="series"> {{listing.series}} </h1>
    <h2 class="episode">{{listing.episode}}</h2>
    <p class="description">{{listing.description}}</p>
  </div>
  
  <div class="col-md-3">
   <ul class="list-group">
     <li class="list-group-item"><span>Date:</span>  {{listing.datetime | date:longDate}} </li>
     <li class="list-group-item"><span>On air:</span> {{listing.datetime | date:'EEEE' }}  </li>
     <li class="list-group-item"><span>Time:</span> {{listing.datetime | date:'shortTime' }} </li>
     <li class="list-group-item"><span>Season:</span>  {{listing.season}} </li>
     <li class="list-group-item"><span>Genre:</span> {{listing.genre}} </li>
    </ul>
  </div>
</div>

programListing.js

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