I'm completely new to AngularJS and I'm attempting to retrieve some JSON items from a webservice I quickly set up using ServiceStack. When I enter the URL in the browser, I can see the JSON object without any issues. However, for some reason AngularJS is unable to fetch the data successfully. Here is my code:
angular.module('SomeApp', []).controller('ItemsFetcher', [ '$http', function($http){
var x = this;
x.products= [
{
Name: 'Missing items',
Description: 'Could not access server'
}];
$http.get('http://localhost:29029/json/reply/GetAllItemsRequest')
.then(function(data){
x.products = [
{
Name: 'Success',
Description: 'Great stuff!'
}];
});
}]);
Below is the corresponding view:
<html ng-app="SomeApp">
<head>
<title>My First App</title>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body ng-controller="ItemsFetcher as fetcher">
<h3>PRODUCTS</h3>
<div ng-repeat="item in fetcher.products">
<div>{{item.Name}} - {{item.Description}}</div>
</div>
</body>
Even though I can see the JSON object when accessing http://localhost:29029/json/reply/GetAllItemsRequest directly through the browser, it seems like there might be something missing or incorrect in my AngularJS setup. Any insights on what could be causing this issue?