This is the Spring Rest controller in the back end which simply get all the student in the list. I have tested it and works fine.
#RestController
#RequestMapping("a/rest")
public class RestfulController {
#Autowired
private StudentDao studentDao;
#RequestMapping(method = RequestMethod.GET)
public ResponseEntity<List<Student>> index() {
ResponseEntity<List<Student>> studList = new ResponseEntity<List<Student>>( studentDao.getAll(), HttpStatus.OK);
return studList;
}
}
This is what i am trying to do i want that list of student to display in the paragraph with id defined(id="displayData")
I have created button that loads the function showData()
Then i am trying to implement $http service of Angularjs for connecting to the back in this way
<body>
<input type="button" value="Get Data" onclick="showData()" />
<p id="displayData" />
</body>
<script type="text/javascript">
function showData() {
$http({
method: 'GET',
url: 'a/rest'
}).then(function (response) {
$('#displayData').html(JSON.stringify(response));
});
}
</script>
Here i need help..!! Problem is on the frontend. How can i implement $http service that works file?
$http response will contain
properties. $http response.data contain actual json data. It does not work the way jquery($.ajax()) work.
You need to bootstrap your angular application before you can use $http service.
Below is minimal example suit to your need.
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
</head>
<body ng-app="studApp" ng-controller="StudController">
<input type="button" value="Get Data" ng-click="showData()" />
<p id="displayData" />
<script type="text/javascript">
angular.module('studApp', [])
.controller('StudController', function($http, $scope) {
$scope.showData = function() {
$http({
method : 'GET',
url : 'a/rest'
}).then(function(response) {
$('#displayData').html(JSON.stringify(response.data));
});
}
});
</script>
</body>
</html>
try this
$('#displayData').html(JSON.stringify(response.data));
server side return data is JSON string?
Related
I am trying to fetch data from REST API but it results blank.
index.html
<html ng-app="demo">
<head>
<title>Hello AngularJS</title>
<script src="jquery.min.js"></script>
<script src="angular.min.js"></script>
<script src="hello.js"></script>
</head>
<body>
<div ng-controller="Hello">
<p>The ID is {{greeting.id}}</p>
<p>The content is {{greeting.content}}</p>
</div>
</body>
</html>
hello.js
angular.module('demo', [])
.controller('Hello', function($scope, $http) {
$http.get('http://rest-service.guides.spring.io/greeting').
then(function(response) {
$scope.greeting = response.data;
});
});
output:
The ID is
The content is
ID and content is still missing. Any help please?
Edit:(FIX) Problem was with a plugin installed in the browser, which weren't allowing web service. Thanks everyone.
Well Seems like your api return following response:
{
"id": 879,
"content": "Hello, World!"
}
try fetching response.content for accessing message
I tried to run your code in my local. I observed that if you replace http from https in you request, it wont work. Try to run this from file protocol in your browser and it will work as shown in the picture.
Also the api you mentioned is now working over HTTPS.
Edit your controller with following one
angular.module('demo', [])
.controller('Hello',
function ($scope, $http) {
var callMethod = function() {
$http.get('http://rest-service.guides.spring.io/greeting')
.then(function(response) {
$scope.greeting = response.data;
alert($scope.greeting.id);
alert($scope.greeting.content);
},
function(error) {
console.log(error);
});
}
callMethod();
});
I am a beginner in angular js. I am experimenting with $http service in angularjs. I am accessing a web service. It returns expected response when using curl statement in ubuntu but is not succeeding when the parameter in curl is mapped to $http.post() parameter. Please take a look at my code for both curl and angularjs page. Please point me out my mistake and help me to resolve the issue.
curl --data "email=test#test5.com" HTTP://dummy.dummyplane.com/dummyservices/UserExists
Result:
{"Data":"123456","Success":true,"Exception":null}
Angularjs code
<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
</head>
<body ng-app="myapp">
<div ng-controller="registerController">
<button ng-click='Register()' style='margin-top:15px'>Register</button>
</div>
<script type="text/javascript">
var app = angular.module('myapp', []);
app.controller('registerController', function($scope, $http) {
$scope.Register = function() {
$http({
url:'http://tethys.dev.riekerinc.com/totalsolutions/UserExists/',
method:'POST',
data:{"email":"tina#test5.com"},
headers:{'Content-Type':'application/x-www-form-urlencoded'}
}).success(function(data){
//console.log(data)
alert("Success");
});
};
});
</script>
</body>
</html>
You set the content type to the correct value, but you don't tell angular to use a different serializer than the default one, so it still sends it in JSON format.
Use $httpParamSerializerJQLike, or simply send the data as a string:
data: 'email=tina#test5.com'
I'm new to angular, so apologies if this has an obvious answer. I want to display a blog post title and its published date, as the start date, on the ui-calendar. It works fine with hardcoded start, end and title values but nothing is returned when in the success directive when I make a jsonp call.
The jsonp call works fine if I don't use the calendar, so I think it's a syntax issue.
This is my angular code (with hard-coded dates):
var MyController = function($scope) {
$scope.uiConfig = {
...
};
$scope.eventSources = [$scope.events];
$scope.events = [
{
start : '2015-04-20',
end : '2015-04-21',
type: "GET",
url: 'http://calendar.jacarandatech.com/wp-json/posts/5/?_jsonp=?',
dataType: 'jsonp',
success: function(response) {
//what do I put here to display the response.title??
}
}
]
};
angular
.module('MyApp', ['ui'])
.controller('MyController', MyController);
and my html code:
<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<link rel="stylesheet" href="bower_components/fullcalendar/fullcalendar.css"/>
<script src="http://code.jquery.com/jquery-1.7.1.js"></script>
<script src="http://code.angularjs.org/1.0.1/angular-1.0.1.js" ng:autobind></script>
<script type="text/javascript" src="bower_components/angular-resource/angular-resource.js"></script>
<script src="http://www.dillingermediaonline.com/angular-ui.js"></script>
<script type="text/javascript" src="bower_components/jquery-ui/ui/jquery-ui.js"></script>
<script type="text/javascript" src="bower_components/angular-ui-calendar/src/calendar.js"></script>
<script type="text/javascript" src="bower_components/fullcalendar/fullcalendar.js"></script>
<script type="text/javascript" src="bower_components/fullcalendar/gcal.js"></script>
<script type="text/javascript" src="app.js"></script>
<title>ng calendar</title>
</head>
<body>
<div ng-controller="MyController" calendar="calendar" ui-calendar="uiConfig.calendar" ng-model="eventSources"></div>
</body>
</html>
jsonp code (works fine):
$.ajax({
type: "GET",
url: 'http://calendar.jacarandatech.com/wp-json/posts/5/?_jsonp=?',
dataType: 'jsonp',
success: function (response) {
var posttitle = response.title;
var timestamp = response.modified_gmt;
console.log('post title = ' + posttitle);
console.log('timestamp = ' + timestamp);
}
});
I researched the following stackoverflow questions but couldn't get their solutions to work:
How do I use jsonp with angular-ui calendar
Angular JSONP calling WordPress JSON REST API
You need to make sure that the variables that contain the title and the timestamp are within the controller's scope.
First, in the first line add $http in the controller like this:
var MyController = function($scope, $http) {
then declare the variables:
$scope.postTitle = '';
$scope.postTimestamp = '';
You should use $http to make the AJAX call. The other function you showed is not needed.
$http.get('http://calendar.jacarandatech.com/wp-json/posts/5/?_jsonp=?').success(function (res) {
$scope.postTitle = res.title;
$scope.postTimestamp = res.modified_gmt;
});
This will let you declare the calendar event like this:
start : $scope.postTimestamp,
title : $scope.postTitle
I am new to AngularJS and loving it as I learn it. I am trying to figure out how to communicate with MongoLab from AngularJS using $resource and RESTful API. I have the following two files:
index.html:
-----------
<!DOCTYPE html>
<html lang="en">
<head>
<title>MongoLab Connectivity Test</title>
<script src="angular.js"></script>
<script src="angular-resource.js"></script>
<script src="app3.js"></script>
<link rel="stylesheet" href="bootstrap.css" />
<link rel="stylesheet" href="bootstrap-theme.css" />
</head>
<body ng-app="myModule">
<div ng-controller="display">
<p>{{data.message}}</p>
</div>
</body>
</html>
app3.js:
--------
var myModule = angular.module('myModule', ['ngResource']);
myModule.controller('display', function($scope, personService) {
$scope.data = personService.query();
});
myModule.constant({
DB_BASEURL: "https://api.mongolab.com/api/1/databases/db1/collections",
API_KEY: "<MyAPIKey>"
})
myModule.factory('personService', ['$resource', 'DB_BASEURL', 'API_KEY',
function($resource, DB_BASEURL, API_KEY)
{
return $resource
(DB_BASEURL+'/persons/:id'
,{id: "#id" apiKey: API_KEY}
);
}
]);
When I try it, I get the following output:
{{data.message}}
I am not sure what I am doing wrong. Hoping to get some help.
A better way to connect would be : https://github.com/pkozlowski-opensource/angularjs-mongolab
[copying the text from documentation AS IT IS]
Usage instructions
Firstly you need to include both AngularJS and the angular-mongolab.js script : https://raw.githubusercontent.com/pkozlowski-opensource/angularjs-mongolab/master/src/angular-mongolab.js
Then, you need to configure 2 parameters:
MongoLab key (API_KEY)
database name (DB_NAME)
Configuration parameters needs to be specified in a constant MONGOLAB_CONFIG on an application's module:
var app = angular.module('app', ['mongolabResourceHttp']);
app.constant('MONGOLAB_CONFIG',{API_KEY:'your key goes here', DB_NAME:'angularjs'});
Then, creating new resources is very, very easy and boils down to calling $mongolabResource with a MongoDB collection name:
app.factory('Project', function ($mongolabResourceHttp) {
return $mongolabResourceHttp('projects');
});
As soon as the above is done you are ready to inject and use a freshly created resource in your services and controllers:
app.controller('AppController', function ($scope, Project) {
Project.all().then(function(projects){
$scope.projects = projects;
});
});
Also, you may check out the blog here for even simpler implementation : http://asad.io/angularjs-with-mongolab/
Use the $http module by Angular and Mongolab REST API
For GET request,
$http.get('https://api.mongolab.com/api/1/databases/DATABASE_NAME/collections/COLLECTION_NAME?apiKey=YOUR_API_KEY')
.success(function(data) {
console.log(data)
}
For POST request,
$http.post('https://api.mongolab.com/api/1/databases/DATABASE_NAME/collections/COLLECTION_NAME?apiKey=YOUR_API_KEY', $scope.data, {
headers: {
'Content-Type': 'application/json; charset=UTF-8'
}
})
.success(function() {
console.log('Data saved successfully')
}
More on http method support documentation - http://docs.mongolab.com/data-api/#reference
I am trying to call the Alchemy REST API using Angular js. I am embedding the js in HTML and I have posted the code that I am using below.I am trying to display the JSON from the REST API on the HTML page, but I am not getting anything on the page currently. Please let me know what I am doing wrong?
I am new to Javascript and Angular js.
HTML code :-
<!DOCTYPE html>
<!--View-->
<html ng-app="myApp">
<head>
<meta charset="ISO-8859-1">
<title>Using Angular JS</title>
</head>
<body>
<div data-ng-controller="AngularJSCtrl">
<input type="text" data-ng-model="name"/>
Data from server:
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-resource.min.js"></script>
<script>
var myApp = angular.module('myApp',[]);
<!--Service>
myApp.service('dataService', function($http) {
delete $http.defaults.headers.common['X-Requested-With'];
this.getData = function() {
// $http() returns a $promise that we can add handlers with .then()
return $http({
method: 'GET',
url: 'http://access.alchemyapi.com/calls/text/TextGetTextSentiment',
params: 'text=I am taking my insurance and I have heard great things abot nationwide, outputmode=json',
headers: {'Authorization': 'Token token=ee5379eaf38a3e7931f8f4db39984d6efaf2c75c'}
});
}
});
<!--Controller>
myApp.controller('AngularJSCtrl', function($scope, dataService) {
$scope.data = null;
dataService.getData().then(function(dataResponse) {
$scope.data = dataResponse;
console.log('The return value is:' + dataResponse);
});
});
</script>
</body>
</html>