從Express到Angular獲取數據

Question

你們能幫我嗎？ 我最近一直在嘗試學習角度，但遇到了一個小問題，我無法在簡單的角度應用中從服務器分發數據。

我已經創建了一個快速的本地主機服務器，並且在服務器的文件夾中有一個包含3個.js文件的文件夾，其中包含我的應用程序的數據。 假設其中一個被稱為“菜單”，其中包含具有屬性的對象數組，例如：“名稱”，“價格”，“成分”。

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

在我的Web瀏覽器中的端口：8080上啟動服務器后，我輸入：“ localhost：8080 / menu”，然后可以查看所有對象。

現在在我的角度應用程序中，我創建了一個服務

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

並將其注入到我的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>

我的思想和代碼有什么問題？

親切的問候，Mikolaj

Answer 1

我認為問題是您使用的是jQuery類型的回調語法。 您需要使用.then ，而不是.success和.catch代替.error 。

app.factory('menu', ['$http', function($http) { 
 return $http.get('http://localhost:8080/menu').catch(function(data) {
    console.log(data);
    throw data;
 });

}]);



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