Should work, but it isn't


#1

Hello.

So here's my code:

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 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>
      
    
    <!-- Modules -->
    <script src="js/app.js"></script>

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

MainController.js

BoltNetworkApp.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 BoltNetworkApp = angular.module("BoltNetworkApp",[]);

programListing.js

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

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: {{ listing.datetime | date:'mediumDate' }}</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>

The problem is I cannot get it to work. Tried doing it on my computer, using the exact same folder tree and same files. When i test it in Chrome's console I get the following error:
Uncaught ReferenceError: app is not defined(anonymous function) @ programListing.js:1

Please help, I'm busting my head over this for a day and cannot figure it out :slightly_smiling:


#2

Ok solved it

I was blind or something and didn't realize my variable name declared in app.js is BoltNetworkApp instead of just app