Routing I: image gallery not showing up


#1

I'm stuck on 1/4 of the routing tutorial for Angular JS (Link Below)
https://www.codecademy.com/en/courses/learn-angularjs/lessons/routing/exercises/routing-routing-i

I've followed the instructions exactly with no warnings appearing and the tutorial will let me continue to the next section. In the browser I see a red logo, some text that is not in English and a black square that says 'recent photos'. From looking at others screen shots of the same page a number of images should be showing below, but they do not. I have tried refreshing the page and also seeing the full code provided by Codecademy but in neither case does the image gallery show up! I've included some screen shots to help explain what is happening along with the code I've entered for both index.html and app.js.

Has anyone else had this issue? I'd greatly appreciate any guidance anyone can give me!


#2

Please paste your HomeController.js and home.html view so we can help you :slight_smile:


#3

Thanks for replying! I've pasted them below :slight_smile:

HomeController.js

app.controller('HomeController', ['$scope', 'photos', function($scope, photos) {
  photos.success(function(data) {
    $scope.photos = data;
  });
}]);

home.html

<div class="main">
  <div class="container">

    <h2>Recent Photos</h2>
    <div class="row">
      <div class="item col-md-4" ng-repeat="photo in photos">
        <a href="#/photos/{{$index}}">
          <img class="img-responsive" ng-src="{{ photo.url }}">
          <p class="author">by {{ photo.author }}</p>
        </a>
      </div>
    </div>

  </div>
</div>

#5

Hello,
I have exactly the same problem and when I copy paste the code in my text editor, I have an error :

Error: [$injector:unpr] Unknown provider: photosProvider <- photos

Apparently a 'required dependency' issue but I'm enable to solve that for now despite my research, do you have an idea ?
Thanks


#6

I am getting the same problem. I am unable to see the photo gallery. In console I got this error:

Mixed Content: The page at 'https://www.codecademy.com/courses/learn-angularjs/lessons/routing/exercise…ng-routing-ii?action=lesson_resume&link_content_target=interstitial_lesson' was loaded over HTTPS, but requested an insecure stylesheet 'http://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css'. This request has been blocked; the content must be served over HTTPS.

Any solution for this?


#7

Got the answer :joy:

Changed content of "photo.js" by replacing "http://" to "https://". That's it.


#8

Oh, yes indeed, Thanks !


#9

That worked. Thanks.


#10

Yep, fixed! Thanks very much.


#11

thanks, it works with "https://"


#12

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