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