2017-04-08 13 views
0

Ich habe versucht, den Webapi-Dienst zu verbrauchen, den ich mit angularjs erstellt habe. Die Seite scheint jedoch nach dem Ausführen leer zu sein.Leere Seite beim Versuch, Webapi-Dienstdaten anzuzeigen

App.js

var app = angular.module("productsApp", ["productService"]); 

app.controller("productsController", function ($scope, product) { 
    $scope.products = product.query(); 
}); 

Service.js

(function() { 
    angular.module("productService", ["ngResource"]). 
    factory("product", function ($resource) { 
     return $resource('http://localhost:55755/api/products/:id'); 
    }); 
}()); 

Html Datei

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <meta charset="utf-8" /> 
    <link href="Content/bootstrap.css" rel="stylesheet" /> 
    <script src="Scripts/angular.js"></script> 
    <script src="Scripts/angular-resource.js"></script> 
</head> 
<body ng-app="productsApp"> 
    <div ng-controller="productsController as vm"> 
      <table> 
       <tr ng-repeat="p in vm.products"> 
        <td>{{ p.productName}}</td> 
        <td>{{ p.productCode }}</td> 
        <td>{{ p.releaseDate | date }}</td> 
        <td>{{ p.price | currency }}</td> 
       </tr> 
      </table> 
    </div> 
    <script src="Scripts/App.js"></script> 
    <script src="Scripts/service.js"></script> 
</body> 
</html> 
+0

können Sie hier eine Demo setzen? –

Antwort

1

Sie verwenden controllerAs Syntax in Sicht, aber nicht in der Steuerung

Versuchen Sie, zu ändern:

app.controller("productsController", function (product) { 
    var vm = this; 
    vm.products = product.query(); 
}); 

Wenn controllerAs verwenden Sie brauchen nur $scope für Dinge wie Winkel Ereignisse und $watch

+0

Hey, habe das versucht, aber habe nicht funktioniert –

Verwandte Themen