Angularjs + GAE + 端点

Question

我正在尝试将 angularjs 与谷歌应用引擎和端点一起使用。我有一个很小的测试应用程序，带有一个小的 API，我用它来使用带有 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);
    };

}]);

Answer 2

我没有在您的代码中看到您实际调用端点方法。

你必须有类似的东西：

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

在您的插入函数中。

更新。 从一开始就。 首先你需要加载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();
                });

接下来，你需要加载你的 api：

function init() {

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

}

然后你可以调用你的 api 的方法。