Angularjs bolt network - Task # 3 - first part


#1

I can't seem to get the image to show. The whole exercise is done with the exception of making the image show.

What I currently have: HTML - line 26 - <img ng-source="{{ program.series_img }}">


#2

not good: <img ng-source="{{ program.series_img }}">
good : <img ng-source="{{ program.series_img }}" />

don't forget / at the end of <img />


#4

Can someone offer some help, none of my date time title information is showing in the preview I only get the tags {{ }}.

all data looks correct. However I created the files with the module and controller in my app.js, double checked tags, spacing syntax ,probably just something small I am missing that is obvious. Can someone offer a code snippet and what code you put your files into? I noticed when I was opening files that there is a maincontroller.js file. so I even tried extracting the controller stuff out of app.js and putting it in there but then nothing shows up at all. So I put the controller declaration back into app.js under the module declaration.


#5

Thank you dataninja08325 for your previous help, I appreciate it. I cannot believe I forgot to close that tag.

However the image is still not showing for me and I don't know why. Here is my code, any ideas?
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

<!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" ng-src="">
      </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">
            </div>
            
            <div class="col-md-6">
              <img ng-source="{{ program.series_img }}" />
              <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.datetime | date }} </span>  </li>
                <li class="list-group-item"><span>On air: {{ program.datetime | date:'EEEE' }}</span>  </li>
                <li class="list-group-item"><span>Time: {{ program.datetime | 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>
    
    <!-- Modules -->
    <script src="js/app.js"></script>

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

#6

haha I didnt see another roblem... and i wrote it like you xD

However its not

<img ng-source="{{ program.series_img }}" />

but

<img ng-src="{{ program.series_img }}" />

#7

and btw their is another tag img where you didnt put the '/' .


#8

Hi, I'm having the exact same problem. It seems that you follow the instructions, but you only see {{ date | more info }} but not the Angular magic. Did you ever figure out what was wrong??


#9

Main Error: I found the issue in index.html and it has to do with the use of 'ng-source.' ng-source does not work, but ng-src does work.

Before: <img ng-source="{{ program.series_img }}" />
After: <img ng-src="{{ program.series_img }}" />

I used your same code on my end and it works with the edit above.

Secondary Error: This error is minor, but '<div class="footer">' isn't properly closed. You need to add a ' to close it properly.

Third Error: Not really an error, but I think the <img ng-scr.....> should be used in the<div class="series_img"></div>. At least that is what I thought.

Last note, I used Chrome for this. Not sure how IE or Firefox behave.