All white page on exercise 4


#1
  1. Build in directives, done with exercises, but get all white interface with angular expressions visible when running code

Here is MainController file

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

Here is my index file

<!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.title }}"></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>

#2

How can I continue when I can't fix this exercise? Is there any way I can replace my code wit the appropriate correct code for the exercise?


#3

i think you have to transform

<app-info info="{{ app.title }}"></app-info>

into

 <app-info info="app"></app-info>

#4

I followed this but am getting a white screen as well. But the code passes..

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

#5

It seems to work if you do this:

<div class="card" ng-repeat="info in apps">
<app-info info="info"></app-info>
<install-app></install-app>
</div>

#6

Odd... clicking Run, and then refreshing the browser solved my issue. I'll assume it's a problem with Codecademy's IDE


#7
    <div class="card" ng-repeat="app in apps">
       <app-info info="app"></app-info>
    </div>

Seems to work for me but, you need to remove your other class="card" divs.
Your running through a foreach loop on each of your apps.