How can I use an AngularJS controller to get data from Google App Engine and not just from json file

Question

I am new to web dev and am trying to get data that has been inserted into a Google App Engine datastore and selectively post it onto a page using AngularJS. I am able to get Angular to work with a JSON file and can post the content of my app engine database using inline javascript on an html file, but I would like to do so using AngularJS. I tried to follow the tips listed on this page, but it seems to be missing information and doesn't explain where I should add "gapi.client.guestbook.messages. insert(message).execute();". I used objectify to annotate the api and java to write the new entity and api.

For example, the following code which references a json file in my program, works fine.

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();
                } ]);

But when I try to make a controller to reference the Google datastore, I don't know exactly what to do. My best guess based on what I have researched is the following, but it's clearly not connecting to the database. If I do a simple get or insert call to the app engine without Angular, I first call function init() which loads gapi and calls getListings and insertListings. Do I need to do this in the controller? Here is my code which is partially based on 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();
                      });
                    }


                      }
                    ]);

The following code is for the inline javascript that I can use to get and insert data from the datastore. I successfully used it to upload new data, but I can't seem to figure out how to use the inserted data on new pages. Thank you and please let me know if you know how to do this or can elaborate on the intro on the google web apps page.

<script type="text/javascript">
        function init() {
                //Parameters are APIName,APIVersion,CallBack function,API Root
                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(); 
}
        }

        //List Quotes function that will execute the list call
        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;
                        }
                });
        }
        //Insert function
function insertListing() {
//Validate the entries
var _title = document.getElementById('title').value;
var _price = document.getElementById('price').value;

//Build the Request Object
var requestData = {};
requestData.title = _title;
requestData.price = _price;

gapi.client.listingserviceapi.insertListing(requestData).execute(function(resp) {
if (!resp.code) {
//Just logging to console now, you can do your check here/display message
console.log(resp.id + ":" + resp.author + ":" + resp.message);
}
});
}

    </script>
<script src="https://apis.google.com/js/client.js?onload=init"></script>

score 0 · Accepted Answer · answered May 22 '14 at 08:11

0

There's no difference from the point of view of your Angular code whether the data comes from JSON or the datastore. The difference is in your server-side code: you need to write a method in your GAE app that responds to a request, queries the datastore, builds a JSON blob and returns it.

The tutorial you're referencing is an attempt to abstract some of that away by using GAE Cloud Endpoints. But that still needs quite a bit of setup at the server side, and it's not really necessary if all you want to do is return some JSON.

answered May 22 '14 at 08:11

Daniel Roseman

588,541
66
880
895

Thanks. Is there a way I could write such a method similar to my getListings method above but use json format rather than "result+ resp.items[i].title ..."? How can I create a json blob that is used temporarily to get the desired data? Do you know of any tutorials or articles that would help me do this? – Mark May 22 '14 at 19:50
But `getListings` is a client-side function. You need something on the server side, in your GAE application, that creates the data as JSON and returns it in response to the client-side call: you don't say what language you are using on the server, but in Python you can do `json.dumps(whatever)`, no doubt Java/Go/PHP have something similar. – Daniel Roseman May 22 '14 at 19:53
Thanks. I am using java and found that I can use json-simple to do the equivalent of json.dumps(x). I'm a little confused on where I should add the java code and how to call it though. Should I include it in my listingServiceAPI? How can I then access the json via the controller if it's the result of a method rather than a json document? I also saw somebody discussing a different method in the link below and am curious if there's any advantage to creating the json via GAE. http://stackoverflow.com/questions/19399419/angular-js-and-google-api-client-js-gapi – Mark May 22 '14 at 21:53
Turns out I was doing that, but just needed to fix the way I was using angular to access the json. Thanks – Mark Jun 07 '14 at 01:06

How can I use an AngularJS controller to get data from Google App Engine and not just from json file

1 Answers1