Lesson 2/Exercise 4 - No Matter what, NOTHING shows in the browser

Get Help Angular.js
#1

I have been through literally every single post in the forum, and no matter what I try, all I see is app market in the browser. The code passes, however, so there’s no way for me to force Codecademy to display the correct code.

# index.html
<!doctype html>
<html>
  <head>
    <link href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css" rel="stylesheet" />
    <link href="css/main.css" rel="stylesheet" />

    <!-- Include the AngularJS library -->
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
  </head>
  <body ng-app="AppMarketApp">
    <div class="header">
      <div class="container">
        <h1>App Market</h1>
      </div>
    </div>

    <div class="main" ng-controller="MainController">
      <div class="container">
         <div ng-repeat="app in apps" class="card" >
           <app-info info="app"></app-info>
 	 </div>
        
      </div>
    </div>

    <!-- Modules -->
    <script src="js/app.js"></script>

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

    <!-- Directives -->
		<script src="js/directives/appInfo.js"></script>

  </body>
</html>

# MainController.js

app.controller('MainController', ['$scope', function($scope) {
  $scope.apps = [
    {
    icon: 'img/move.jpg',
    title: 'MOVE',
    developer: 'MOVE, Inc.',
    price: 0.99
  },
    {
    icon: 'img/shutterbugg.jpg',
    title: 'Shutterbugg',
    developer: 'Chico Dusty',
    price: 2.99
  },
    {
    icon: 'img/gameboard.jpg',
    title: 'Gameboard',
    developer: 'Armando P.',
    price: 1.99
  },
    {
    icon: 'img/forecast.jpg',
    title: 'Forecast',
    developer: 'Forecast',
    price: 1.99
  }
  ];
}]);

# appInfo.js

app.directive('appInfo', function() {
	return {
		restrict: 'E',
		scope: {
			info: '='
		},
templateUrl: 'js/directives/appInfo.html'
	};
});

# appInfo.html

<img class="icon" ng-src="{{ app.icon }}">
<h2 class="title">
{{ app.title }}</h2>
<p class="developer">{{ app.developer }}</p>
<p class="price">{{ app.price | currency }}</p>

What am I doing wrong? This is insanely frustrating to pass, yet clearly something is broken.

#2

EDIT: I just started over from scratch, hoping the editor would catch errors. NOPE. Same problem. Passed, but nothing shows.

#3

Do you happen to have the # MainController.js in the actual controller?

Comments in JavaScript are usually // or /* comment */

# is a Ruby/Python comment.

#4

Nope, I just added that as an indicator of the file

#5

In appInfo.html app should be changed to info:

<img class="icon" ng-src="{{ info.icon }}">
<h2 class="title">{{ info.title }}</h2>
<p class="developer">{{ info.developer }}</p>
<p class="price">{{ info.price | currency }}</p>

because the appInfo.js directive has the property info attached to it’s scope.

#6

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