javascript - Angularjs + GAE + 端点

Question

我正在尝试将 angularjs 与谷歌应用程序引擎和端点一起使用。我有一个带有小型 API 的小型测试应用程序，我用它来了解如何使用 Angular 和 GAE 端点。 “用户”输入文本并单击“提交”以使条目返回到后端。当我从谷歌的应用程序引擎平台执行此操作时它可以工作，但我很难在客户端实现它。非常感谢任何帮助。

屏幕截图

ma​​in.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

愚蠢的我忘记导入和使用ndb。目前，在 angularjs 中，我已经放弃使用 google-client，直到我学会了正确的实现。这是使用 Angular 的 ngResource 依赖项的“非谷歌客户端”答案。使用过this github 示例作为指导。

ma​​in.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);
    };

}]);