Only seeing expression variables, all previous suggestions don't seem to work


#1



https://www.codecademy.com/courses/learn-angularjs/projects/angularjs_bolt-network-1


I'm only seeing the expression variables, ie {{ program.series }} etc. An earlier forum post indicated I should remove the ; after the $scope.program {} I tried that but then got a red dot on that line and it wouldn't allow me to save it. What am I doing 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:

<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">
          <div class="row">
            
            <div class="series_img">
            {{ 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 }}  </li>
                <li class="list-group-item"><span>On air:</span> {{ program.datetime | date:EEEE}} </li>
                <li class="list-group-item"><span>Time:</span>{{ program.datetime | time}} </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>

#2

Is the full HTML intact, including angular.min.js?


#3

angular.min.js is there but just now I noticed a red dot by the line with not clear why

<!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">
          <div class="row">
            
            <div class="series_img">
            {{ 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 }}  </li>
                <li class="list-group-item"><span>On air:</span> {{ program.datetime | date:EEEE}} </li>
                <li class="list-group-item"><span>Time:</span>{{ program.datetime | time}} </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>

    <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>
  </body>
</html>

#4

by the line with the ending body tag


#5

An unclosed DIV perhaps? The end tag would go right above <!-- Modules -->.


#6

ok, I added the missing </div> tag but it still give me the same error.















<div class="main" ng-controller="MainController">
  <div class="container">
    <div class="content">
      <div class="row">
        
        <div class="series_img">
        {{ 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 }}  </li>
            <li class="list-group-item"><span>On air:</span> {{ program.datetime | date:EEEE}} </li>
            <li class="list-group-item"><span>Time:</span>{{ program.datetime | time}} </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>

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



#7

The raw expressions will show if AngularJS is not present.The vendor copy of angular may be damaged or unreachable. Replace the script line that loads angular.min.js with this:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>

and see if that fixes the problem. Otherwise it's back to your code we go.


#8

sadly that did not work either


#9

I'm stumped. Suggest check off all the tasks so you get the Next button and move to next lesson. All the above code will be getting changed in the next section.


#10

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