lundi 1 février 2016

GET data from Express to Angular

Can you guys please help me. I've been trying to learn angular recently and I came up with this little problem that I can't dispaly data from server in simple angular app.

I've created an express local-host server and in folder of my server I have a folder with 3 .js files containing data for my app. Let's just say one of them is called "menu" and contains array of objects with properties like: "name", "price", "ingredients".

module.exports = [
{
    id: 1,
    name: 'Margherita',
    ingredients: [1, 2],
    price: 14.90
},
{
    id: 2,
    name: 'Funghi ',
    ingredients: [1, 2, 3],
    price: 16.90
},
{
    id: 3,
    name: 'Vesuvio',
    ingredients: [1, 2, 4],
    price: 17.90
}];

After launching a server on port :8080 in my web browser I'm typing: "localhost:8080/menu" and I have a view of all my objects.

Now in my angular app I've created a service

 app.factory('menu', ['$http', function($http) { 
 return 
 $http.get('http://localhost:8080/menu') 
        .success(function(data) { 
          return data; 
        }) 
        .error(function(err) { 
          return err; 
        }); 
  }]);

and injected it to my MainController.js

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

  menu.success(function(data){
  $scope.pizzaMenu = data;
   });

}]);

index.html

 <div class="appetizers row" ng-repeat="pizza in pizzaMenu.module.export">
          <div class="item col-md-9">
            <h3 class="name"> {{pizza.name}} </h3>
            <p class="description"> {{pizza.ingredients}} </p>
          </div>
          <div class="price col-md-3">
            <p class="price">  {{pizza.price}} </p>
          </div>
        </div>

What is wrong with my thinking and my code?

Kind regards, Mikolaj




Aucun commentaire:

Enregistrer un commentaire