As a newcomer to web development, I have been experimenting with retrieving data from a Google App Engine datastore and selectively displaying it on a webpage using AngularJS. While I have successfully integrated Angular with a JSON file and posted the content of my app engine database using inline JavaScript in an HTML file, I desire to accomplish the same using AngularJS. The resource I attempted to follow, this page, seems to lack crucial information, particularly on where to include the line "gapi.client.guestbook.messages.insert(message).execute();". To build the API and write the new entity, I utilized objectify for annotation and Java.
For instance, the code provided below that references a JSON file within my program functions correctly:
listingControllers.controller('ViewItemsCtrl', [
'$scope',
'$routeParams',
'$http',
function($scope, $routeParams, $http) {
$http.get('phones/' + $routeParams.phoneId + '.json').success(
function(data) {
$scope.phone = data;
$scope.mainImageUrl = data.images[0];
});
$scope.setImage = function(imageUrl) {
$scope.mainImageUrl = imageUrl;
}
$('.dropdown-toggle').dropdown();
} ]);
However, when attempting to create a controller to reference the Google datastore, I find myself uncertain about the necessary steps. My best guess, based on my research, led me to the following code snippet which unfortunately does not establish a connection to the database. Typically, when making a simple call to the app engine without Angular, I would begin by invoking the function init(), which loads gapi and calls getListings and insertListings. Should I implement this within the controller? Below is my code, inspired by this.
listingControllers.controller('datastoreTestCtrl', [
'$scope',
'$routeParams',
'$http',
function datastoreTestCtrl($scope) {
$scope.insertListing = function() {
message = {
"title" : $scope.title,
"price" : $scope.price
};
gapi.client.listingserviceapi.insertListing(message).execute()
}
$scope.list = function() {
gapi.client.listingserviceapi.getListings().execute(function(resp) {
$scope.messages = resp.items;
$scope.$apply();
});
}
}
]);
Lastly, the following code demonstrates the inline JavaScript that I successfully employed to retrieve and insert data into the datastore. While I achieved success in uploading new data, I encountered challenges in utilizing the inserted data on subsequent pages. I would greatly appreciate any insights on how to achieve this or further clarification on the introductory material provided on the Google web apps page. Thank you.
<script type="text/javascript">
function init() {
gapi.client.load('listingserviceapi', 'v1', null, 'https://molt-team-233.appspot.com/_ah/api');
document.getElementById('getListings').onclick = function() {
getListings();
}
document.getElementById('insertListing').onclick = function() {
insertListing();
}
}
function getListings() {
gapi.client.listingserviceapi.getListings().execute(function(resp) {
if (!resp.code) {
resp.items = resp.items || [];
var result = "";
for (var i=0;i<resp.items.length;i++) {
result = result+ resp.items[i].title + "..." + "<b>" + resp.items[i].description + "</b>" + "[" + resp.items[i].price + "]" + "<br/>";
}
document.getElementById('getListingsResult').innerHTML = result;
}
});
}
function insertListing() {
var _title = document.getElementById('title').value;
var _price = document.getElementById('price').value;
var requestData = {};
requestData.title = _title;
requestData.price = _price;
gapi.client.listingserviceapi.insertListing(requestData).execute(function(resp) {
if (!resp.code) {
console.log(resp.id + ":" + resp.author + ":" + resp.message);
}
});
}
</script>
<script src="https://apis.google.com/js/client.js?onload=init"></script>