As a newcomer to web design and Angular, I am trying to replicate this example, where I consume a RESTful web service and use AngularJS to display the JSON data.
However, I'm facing issues with my implementation. Here's how my main.jsp file looks:
<!doctype html>
<html ng-app>
<head>
<title>Your Bill</title>
<!-- Include the AngularJS library -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
<!-- BillParser script -->
<script type="text/javascript" src="js/app.js"></script>
</head>
<body>
<div ng-controller="GetBill">
<p>The ID is {{bill.id}}</p>
<p>The content is {{bill.content}}</p>
</div>
</body>
</html>
And here's my app.js code:
function GetBill($scope, $http) {
$http.get('http://rest-service.guides.spring.io/greeting').
success(function(data) {
$scope.bill = data;
console.log('INITTED');
});
}
When I view it on localhost/billparser/index, I see this displayed:
The ID is {{bill.id}}
The content is {{bill.content}}
I seem to be encountering an error indicated by this link: https://docs.angularjs.org/error/ng/areq?p0=GetBill&p1=not%20a%20function,%20got%20undefined.
Could you help me understand what I need to do to resolve this issue? JavaScript is quite new to me, so any guidance would be greatly appreciated!
Thank you for your assistance.