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
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'
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?
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>
I have started working an app using angularjs which can have have different UI themes.
index.html
<html lang="en" data-ng-app="appConfigurator">
<head>
<title>The title</title>
</head>
<body data-ng-controller="appCtrl">
<div data-ng-view></div>
</body>
<script type="text/javascript" src="libs/angular.js"></script>
<script type="text/javascript" src="libs/angular-route.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/services/webservice.js"></script>
<script type="text/javascript" src="js/controllers/appCtrl.js"></script>
<script type="text/javascript" src="js/router.js"></script>
</html>
app.js - Here I initialize my module and also declare a global variable 'theme'.
var appConfigurator = angular.module("appConfigurator", ['ngRoute']);
var theme = "";
webservice.js - This service make Web service calls to the backend and gets the data as response.
appConfigurator.factory('webService', function($http) {
return {
callService : function(method, fileType, rowId, data, message, type) {
return $http({
method : method,
url : url,
data : "Message=" + message + "&XMLData=" + data + "&Type=" + type,
headers : {
'Content-Type' : 'application/x-www-form-urlencoded'
}
});
}
};
});
appCtrl.js - This is the main app controller. Here I am making a webservice call to get the data and then using this data I will have to make one more call to get the name of the "theme" I need to use. So basically two calls.
appConfigurator.controller("appCtrl", function($scope, webService) {
$scope.succ = function(res) {
//alert("success" + res.name);
};
$scope.err = function(res) {
alert("error");
}
webService.callService('POST', 'data', 'ID', '', 'Message','XML').success($scope.succ).error($scope.err);
});
router.js - Based on the value of theme the route will route to the particular folder structure which will contain the theme specific HTML, CSS and JS files.
appConfigurator.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/Config', {
templateUrl: 'themes/'+theme+'/views/a.tmpl.html',
controller: ''
}).otherwise({
redirectTo: '/Config'
});
}
]);
The obvious problem is that by the time routers sets the path for the tempelateUrl I don't have the name of the theme.
Solutions -
1) One solution (this one works) is to get the theme name in the URL as a parameter but that cannot be done on the backend side. So there is no point of this solution.
2) Is there a way I can delay the routing process so that by the time angular tries to route I have the theme name.
The development is in very initial stage. Comments to change the approach will also be helpful. And yes Angularjs is all new to me and my peers.
appConfigurator.config(['$routeProvider', function($routeProvider) {
// set theme name
var theme = 'theme_name';
$routeProvider.when('/Config', {
templateUrl: 'themes/'+theme+'/views/a.tmpl.html',
controller: ''
}).otherwise({
redirectTo: '/Config'
});
}
]);