Bolt Network 1. Learn AngularJS 1.X


#1

The expressions inputted within the col-md-3 list-group-item aren't fully showing. Only "Season" and "Genre" are showing through the expressions inputted. Please let me know what I have wrong.

Here is the link: https://www.codecademy.com/courses/learn-angularjs/projects/angularjs_bolt-network-1
screenshot of missing values: https://www.dropbox.com/s/59bkc421yt5j8yk/Screenshot%202016-12-13%2013.45.50.png?dl=0
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 class="main" ng-controller="MainController">
      <div class="container">
        <div class="content">
          <div class="row">
            
            <div class="col-md-3" class="series_img">
            <img class="img-responsive" 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}}</li>
                <li class="list-group-item"><span>On air:{{program.dateTime | date:'EEEE'}}</span></li>
                <li class="list-group-item"><span>Time:</span>{{program.dateTime | date:"hh:mm a"}}</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>

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

#2

A link to this project would be helpful, please. Thanks.


#3

I've added it in the edit. Thanks. Not sure if non-pro members have access however.


#4

Here is a screenshot: https://www.dropbox.com/s/59bkc421yt5j8yk/Screenshot%202016-12-13%2013.45.50.png?dl=0


#5

I've already done Part 2 which includes directives, but I notice that your date parameters differ from what I used. Could this lead us somewhere?

<span>Date:</span>  {{ program.datetime | date:'longDate' }}</li>
<span>On air:</span> {{ program.datetime | date:'EEEE' }} </li>
<span>Time:</span> {{ program.datetime | date:'shortTime' }}</li>