Appetizer Expressions do not resolve


#1

Hey there,

just started the Pizza Planet Project. I can't get the expression get to work. I don't understand what i'm doing wrong.

app.js

var app = angular.module('PizzaPlanetApp ',[]);

MainController.js

  app.controller('MainController', ['$scope', function($scope) {
  $scope.today = new Date();

  $scope.appetizers = [
    {
      name: 'Caprese',
      description: 'Mozzarella, tomatoes, basil, balsmaic glaze.',
      price: 4.95
    },
    {
      name: 'Mozzarella Sticks',
      description: 'Served with marinara sauce.',
      price: 3.95
    },
    {
      name: 'Bruschetta',
      description: 'Grilled bread garlic, tomatoes, olive oil.',
      price: 4.95
    }
  ];

}]);

index.html

<div class="main" ng-controller="MainController">
      <div class="container">
        <h1>Specials for {{ today | date }}</h1>
        
        <h2>Appetizers</h2>
        <div class="appetizers row" ng-repeat="appetizer in appetizers">
          <div class="item col-md-9">
            <h3 class="name">{{ appetizer.name }}</h3>
            <p class="description">{{ appetizer.description }}</p>
          </div>
          <div class="price col-md-3">
            <p class="price">{{ appetizer.description }}</p>
          </div>
        </div>

      </div>
    </div>

#2

Ok after having a look at TodoMVC and checking the definition of an Angular App and it's binding to the controller I changed my coded to the following and it worked:

app.js

angular.module('PizzaPlanetApp',[]);

MainController.js

angular.module('PizzaPlanetApp')
  .controller('MainController', ['$scope', function($scope) {
  $scope.today = new Date();

  $scope.appetizers = [
    {
      name: 'Caprese',
      description: 'Mozzarella, tomatoes, basil, balsmaic glaze.',
      price: 4.95
    },
    {
      name: 'Mozzarella Sticks',
      description: 'Served with marinara sauce.',
      price: 3.95
    },
    {
      name: 'Bruschetta',
      description: 'Grilled bread garlic, tomatoes, olive oil.',
      price: 4.95
    }
  ];

}]);

Seems like I ran into a problem of variable scope


#3

Did you add this string to the bottom of your html? Perhaps this is the issue? I say this because this started to work once you updated the controller to include the creation of the app and led me to believe MainController is defined in your html, but not app.js.

  </div>
</div>

<div class="footer">
</div>

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

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

#4

should this not have been {{appetizer.price | currency}} ?


#5

Yes, @betaslayer58326, you are correct. The line that you have identified is enclosed within the div where appetizer.price should be displayed. That div should appear as follows within the index.html file ...

          <div class="price col-md-3">
            <p class="price">{{ appetizer.price | currency }}</p>
          </div>

... provided that the parent of that div has the following start tag ...

<div class="appetizers row" ng-repeat="appetizer in appetizers">

#6