I can't find whats wrong with my code, and neither can my advisor


#1

for some reason, the data is showing up as {{ program. }} instead of it's contents (like the title.) Can anyone find what's wrong?

app.js

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

MainController.js

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

index.html















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

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

        <div class="col-md-6">
          <h1 class="series">{{ program.series }}</h1>
          <h2 class="episode">{{ program.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:</span> {{ program.datetime | date:'mediumDate' }}</li>
            <li class="list-group-item"><span>On air:</span> {{ program.datetime | date:'medium' }}  </li>
            <li class="list-group-item"><span>Time:</span> {{ program.datetime | date:'shortTime' }} </li>
            <li class="list-group-item"><span>Season:</span> {{ program.season }} </li>
            <li class="list-group-item"><span>Genre:</span> {{ program.genre }} </li>
          </ul>
        </div>

      </div>
    </div>
  </div>
</div>
<script src="js/controllers/MainController.js"></script>
<script src="js/app.js"></script>



#2

I dont know if this is your whole code but you forgot to call the app in your div... So here:

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

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

        <div class="col-md-6">
          <h1 class="series">{{ program.series }}</h1>
          <h2 class="episode">{{ program.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:</span> {{ program.datetime | date:'mediumDate' }}</li>
            <li class="list-group-item"><span>On air:</span> {{ program.datetime | date:'medium' }}  </li>
            <li class="list-group-item"><span>Time:</span> {{ program.datetime | date:'shortTime' }} </li>
            <li class="list-group-item"><span>Season:</span> {{ program.season }} </li>
            <li class="list-group-item"><span>Genre:</span> {{ program.genre }} </li>
          </ul>
        </div>

      </div>
    </div>
  </div>
</div>
<script src="js/controllers/MainController.js"></script>
<script src="js/app.js"></script>

You just called the controller in the main div container.. You have to add the ng-app to... so basically you have to call the ng-app in your main div container like this:

<div class="sampleDiv" ng-app="BoltNetworkApp">
</div>

Hope this helped. If it didnt can you please tell me the error? Thankyou


#3

I'm having the same problem! I'm getting sick of staring at this and I want to move on! Here's what I have:

app.js

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

MainController.js

app.controller('MainController', ['$scope', function($scope) {
  $scope.title = 'Titular!';
  $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)
  };
}]);

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="myApp">
    <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">
          <div class="row">
            <p> {{ title }} </p>
            <div class="col-md-3 series_img">
              <img ng-src='{{program.series_img}}'>
            </div>
            
            <div class="col-md-6">
              <h1 class="series"> {{ program.series }} </h1>
              <h2 class="episode">{{program.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:{{program.date | date:'mediumDate'}}</span>  </li>
                <li class="list-group-item"><span>On air:{{program.date | date:'EEEE'}}</span>  </li>
                <li class="list-group-item"><span>Time:{{program.date | date='shortTime'}}</span>  </li>
                <li class="list-group-item"><span>Season:{{program.season}}</span>  </li>
                <li class="list-group-item"><span>Genre:{{program.genre}}</span>  </li>
              </ul>
            </div>
            
          </div>
        </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>
  </body>
</html>

#4

Not sure if you've already moved on from this, but have you tried to update your expressions so that there's a space between the brackets and the text?

Like below:

              <h2 class="episode">{{program.episode}}</h2>
              <p class="description">{{program.description}}</p>

Should be:

              <h2 class="episode">{{ program.episode }}</h2>
              <p class="description">{{ program.description }}</p>

You'll need to update all the expressions, or else none of them will appear in your browser.

Hope that helps!