My Angular expressions wont take data from an array

Question

I'm just getting started with Angular through a codeschool course. It's my first framework. I'm trying to build a very, very simple menu using ng-repeat. This very closely parallels the first project in the codeschool course, but it seems like I may have misunderstood something, or there may have been a concept that was inadequately covered at this point in the course. I've gone back and rewatched the videos that cover what I need to know to build this, and I cannot see what would be keeping this from working. I need to get the ball rolling here. Is it a mistake in my directives?

 <html ng-app = 'menu'>
  <body ng-controller = 'MenuController as menu'>
    <section ng-repeat="menuItem in menu.menuItem">
      <h1> {{menuItem.name}} </h1>
      <p> {{menuItem.description}} </p>
      <h3> {{menuItem.price}} </h3>
    </section>
  </body>
</html>

Heres the JS:

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

app.controller("MenuController", function(){
  this.menuItem = appetizers;
});

var appetizers = [{
    name : "Seared Ahi Tuna",
    decription : "Cooked rare, thinly sliced and served over seaweed salad with a teriyaki glaze",
    price : "12"
},
{
    name : "Artisan Cheese Board",
    decription : "Five chef-selected cheeses from WI farms (Sorry, no happy hour)",
    price : "12"
}...

codepen

Wouldn't declaration of the `appetizers` variable have to come before it's use in `app.controller...`? — i--, Feb 11 '15 at 20:29
To point out again, the issue here is not with the use of `Controller As` vs `$scope`. you *can* use `$scope`, but according to the Angular Documentation, their recommendation is to only use `$scope` in Boilerplate or quick demos; the `Controller As` Syntax has many advantages. https://docs.angularjs.org/api/ng/directive/ngController — Claies, Feb 11 '15 at 20:46

score 0 · Answer 1 · answered Feb 11 '15 at 20:30

Your error is Failed to instantiate module menu There are several possibilities of why you would get this error but in this case it is because it cannot find the module menu. If you look at your code

(function(){

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

notice you never actually call the anonymous function so the code never actually runs. All you have to do is call the function & everything works.

(function(){

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

score 0 · Accepted Answer · edited May 23 '17 at 11:49

0

Your codepen has your script file as an IIFE, but it is missing the invocation () at the end, so it never runs. The code will run perfectly fine if you remove the IIFE Definition (function(){ ... }); or if you add the invocation to the end })();.

Note, this isn't directly related to Angular, it's more an issue of JavaScript Semantics... Don't let this put you off on using Angular!

edited May 23 '17 at 11:49

Community

1
1

answered Feb 11 '15 at 20:31

Claies

21,481
3
49
75

score 0 · Answer 3 · answered Feb 11 '15 at 20:38

You have to execute the anonymous function as Austin said, but the code was also wrong. Usually it's better to inject you scope into the controller to make the item accessible from the ng-repeat command.

(function() {

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

  app.controller("MenuController", function($scope) {
    $scope.menuItem = appetizers;
  });

  var appetizers = [{
    name: "Seared Ahi Tuna",
    decription: "Cooked rare, thinly sliced and served over seaweed salad with a teriyaki glaze",
    price: "12"
  }, {
    name: "Artisan Cheese Board",
    decription: "Five chef-selected cheeses from WI farms (Sorry, no happy hour)",
    price: "12"
  }, {
    name: "Oysters on the Half Shell*",
    decription: "Fresh Blue Points from the Delaware Bay",
    price: "1/2 Order 10, Full Dozen 16"
  }, {
    name: "Chorizo Sliders",
    decription: "Three sliders on pretzel buns with sauteed onion, fried pickle chip and grained mustard",
    price: "9"
  }, {
    name: "Tenderloin Lollipops*",
    decription: "Served over a bed of red wine garlic mushrooms",
    price: "10"
  }]
})();

section {
  border: 1px solid grey;
  width: 50%;
  margin: 0 auto;
}

<html ng-app='menu'>

<head>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>

<body ng-controller='MenuController'>
  <section ng-repeat="item in menuItem">
    <h1> {{item.name}} </h1>
    <p>{{item.description}}</p>
    <h3> {{item.price}} </h3>
  </section>
</body>

</html>

nothing wrong with the code, he is using the Controller As syntax, which is an alternative way to handle variables without needing `$scope`. https://docs.angularjs.org/api/ng/directive/ngController — Claies, Feb 11 '15 at 20:40
Yes it should work this way too but I think the $scope approach is much cleaner. This is why I changed that part too. — ntrp, Feb 11 '15 at 20:47

score 0 · Answer 4 · answered Feb 11 '15 at 20:42

You need to include AngularJS Framework before using it and you are not injecting scope. The original call had anonymous function but not executing it.

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




app.controller("MenuController", ['$scope',
  function($scope) {

    $scope.appetizers = [{
      name: "Seared Ahi Tuna",
      decription: "Cooked rare, thinly sliced and served over seaweed salad with a teriyaki glaze",
      price: "12"
    }, {
      name: "Artisan Cheese Board",
      decription: "Five chef-selected cheeses from WI farms (Sorry, no happy hour)",
      price: "12"
    }, {
      name: "Oysters on the Half Shell*",
      decription: "Fresh Blue Points from the Delaware Bay",
      price: "1/2 Order 10, Full Dozen 16"
    }, {
      name: "Chorizo Sliders",
      decription: "Three sliders on pretzel buns with sauteed onion, fried pickle chip and grained mustard",
      price: "9"
    }, {
      name: "Tenderloin Lollipops*",
      decription: "Served over a bed of red wine garlic mushrooms",
      price: "10"
    }];



    $scope.menu = $scope.appetizers;
  }
]);

section {
  border: 1px solid grey;
  width: 50%;
  margin: 0 auto;
}

<html ng-app='menuApp'>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.12/angular.min.js"></script>
</head>

<body ng-controller='MenuController'>
  <section ng-repeat="menuItem in menu">
    <h1> {{menuItem.name}} </h1>
    <p>{{menuItem.description}}</p>
    <h3> {{menuItem.price}} </h3>
  </section>
</body>

</html>

My Angular expressions wont take data from an array

4 Answers4