<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Security-Policy"
content="default-src plnkr.co; script-src ajax.googleapis.com run.plnkr.co; connect-src rest-service.guides.spring.io ; ">
<title>Hello AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script src="src/app.js"></script>
</head>
<body ng-app="mainAPP">
<div ng-controller= "HelloCtrl as ctrl">
<button ng-click="ctrl.fetchInfo()">Hit!</button>
<p>The ID is {{greeting.id}}</p>
<p>The content is {{greeting.content}}</p>
</div>
</body>
</html>
var app = angular.module('mainAPP', [])
app.controller('HelloCtrl', ['$scope', '$http', function($scope, $http) {
$scope.greeting = {};
this.fetchInfo = function() {
$http.get('http://rest-service.guides.spring.io/greeting').
then(function(response) {
$scope.greeting.id = response.data.id;
$scope.greeting.content = response.data.content;
}),
function(response) {
$scope.data = response.data || 'Request failed';
$scope.status = response.status;
};
};
}]);
/* Styles go here */
{"id":1, "content":" Hola"}