Angularjs + GAE + Endpoints

Question

I am trying to use angularjs with google app engine and endpoints. I have a tiny little testing app with a small API that I am using to get my head around using angular with endpoints with GAE. A'user' enters a text and clicks submit for the entry to go back end. It works when I do it from google's app engine platform but I'm struggling to implement it client-side. Any help is highly appreciated.

screenshot

main.py

import webapp2
import settings
import endpoints

from protorpc import message_types
from protorpc import messages
from protorpc import remote

from google.appengine.api import users

class MainHandler(webapp2.RequestHandler):
  def get(self):
    self.response.write(render_template('base.html'))


class About(messages.Message):
about_x = messages.StringField(1)


@endpoints.api(name='cv', version='v1', description='yup yup yup')
class CvApi(remote.Service):

    @endpoints.method(
        About, 
        About,
        name='about.insert',
        path='about',
        http_method='POST')

    def insert_text(self, request):
        AboutModel(about_x=request.about_x).put()
        return request


api = endpoints.api_server([CvApi])

app = webapp2.WSGIApplication([
    ('/', MainHandler),

], debug=True)

base.html

<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
            <a class="brand" href="#">Colin Endpoints!</a>
            <div class="nav-collapse pull-right">
                <a href="javascript:void(0);" class="btn" id="signinButton">Sign in</a>
            </div>
        </div>
    </div>
</div>

<div class="container">
    <div id="myCtrl" ng-controller="myCtrl" >
        <form ng-submit="insert()">
            <div><h2>Grilla</h2></div>
            <div><textarea name="texto" ng-model="about_x"></textarea></div>
            <div><input id="post_this" type="submit" class="btn btn-small" value="Submit"></div>
        </form>
    </div>
</div>

<script src="https://apis.google.com/js/client.js?onload=init"></script>
<script type="text/javascript" src="/js/angular/controller.js"></script>
<script src="/lib/jquery/2.1.3/jquery.min.js"></script>

<script type="text/javascript" src="/lib/materialize/js/materialize.min.js"></script>
   

</body>

controller.js

var app = angular.module('colinmk', []);

app.config(['$interpolateProvider', function($interpolateProvider) {
  $interpolateProvider.startSymbol('<<');
  $interpolateProvider.endSymbol('>>');
}]);

app.controller('myCtrl', ['$scope', '$window', '$http',

  function($scope, $window, $http) {
    $scope.insert= function() {
      message = {
        "about_x" : $scope.about_x
      };
    };


  $window.init= function() {
    $scope.$apply($scope.load_cv_lib);
  };

  function init() {
    window.init();
  }

  $scope.load_cv_lib = function() {
    gapi.client.load('cv', 'v1', function() {
      $scope.is_backend_ready = true;
      $scope.insert();
    }, '/_ah/api');
  };
}]);

Answer 1

Silly me forgot to import & use ndb. For now in angularjs I've discarded using google-client till I learn the proper implementation. This is the "non-google-client" answer using angular's ngResource dependency instead. Used this github example as a guide.

main.py

import webapp2
import settings
import endpoints

from protorpc import message_types
from protorpc import messages
from protorpc import remote

from settings import render_template
from google.appengine.api import users
from google.appengine.ext import ndb

class MainHandler(webapp2.RequestHandler):
    def get(self):
        self.response.write(render_template('base.html'))

#for endpoint
class About(messages.Message):
    about_x = messages.StringField(1)

class AboutModel(ndb.Model):
    about_x = ndb.StringProperty()

@endpoints.api(name='cv', version='v1', description='yup yup yup')
class CvApi(remote.Service):

    @endpoints.method(
        About, 
        About,
        name='about.insert',
        path='about',
        http_method='POST')

    def insert_text(self, request):
        AboutModel(about_x=request.about_x).put()
        return request


api = endpoints.api_server([CvApi])

app = webapp2.WSGIApplication([
    ('/', MainHandler),

], debug=True)

base.html

<div class="container">
    <div id="myCtrl" ng-controller="myCtrl" >
        <form ng-submit="insert()">
            <div><h2>Grilla</h2></div>
            <div><textarea name="texto" ng-model="info"></textarea></div>
            <div><input id="post_this" type="submit" class="btn btn-small" value="Submit"></div>
        </form>
    </div>
</div>

controller.js

var app = angular.module('colinmk', ['ngResource']);

app.config(['$interpolateProvider', function($interpolateProvider) {
  $interpolateProvider.startSymbol('<<');
  $interpolateProvider.endSymbol('>>');
}]);

app.factory('apiResource', function($resource){
    var apiResource = $resource('/_ah/api/cv/v1/about', {
      save:   {method:'POST'}
      // query: {method: 'GET', isArray: false},
      // update: {method: 'PUT'}
    });
    return apiResource;
})

app.controller('myCtrl', ['$scope', 'apiResource',

  function($scope, apiResource) {

    $scope.insert = function() {
      $scope.about = [];
      var r = new apiResource();
      r.about_x = $scope.info;
      r.$save();
      $scope.about.push(r);
      $scope.info = '';
      console.log(r);
    };

}]);

Answer 2

I don't see in your code that you actually call to your endpoint method.

You must to have something like:

gapi.client.cv.about(message).execute(function(resp) {
                    if (!resp.code) {
                        //ok -- do something    
                    } else {
                        console.log(resp.code);
                    }
            });

in your insert function.

Update. From the beginning. First you need to load client.js

               function loadGoogleClient() {
                    var script = document.createElement("script");
                    script.src = "https://apis.google.com/js/client.js?onload=init";
                    document.body.appendChild(script);
                }
                $(function() {
                    loadGoogleClient();
                });

Next, you need to load your api:

function init() {

var endpoint = window.location.origin + '/_ah/api'; 
gapi.client.load('cv', 'v1', '', endpoint); //third argument is a callback  

}

And after that you can call methods of your api.