I've been working on integrating AngularJS with Google App Engine and endpoints. I have a small testing app with a basic API to help me understand how to use Angular with GAE endpoints. A user inputs text and clicks submit to send the entry to the back end. It functions well on Google's App Engine platform, but I'm facing difficulties with the client-side implementation. Any assistance would be greatly appreciated.
screenshot
https://i.sstatic.net/wpMDL.png
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');
};
}]);