I'm having trouble fetching data from my custom REST API. The API is returning data, but Angular isn't loading it properly. I can see the data being passed in the network tab of the developer tools.
Here's the HTML code:
<!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">
<table>
<tr ng-repeat="p in 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/http.js"></script>
<script src="Scripts/service.js"></script>
</body>
</html>
This is the Service.js file:
(function () {
angular.module("productService", ["ngResource"]).
factory("product", function ($resource) {
return $resource('http://localhost:55755/api/products/:id');
});
}());
And here's the App.js file:
var app = angular.module("productsApp", ["productService"]);
app.controller("productsController", function ($scope, product) {
$scope.products = product.query();
});