Angularjs + GAE + Endpoints

Question

Googleアプリケーションエンジンとエンドポイントでangularjsを使用しようとしています。 GAEを使用したエンドポイントで角度を使用して頭を上げるために使用している小さなAPIを備えた小さなテストアプリがあります。 A'user 'は、テキストを入力し、エントリがバックエンドに戻るためにsubmitをクリックします。私はGoogleのアプリケーションエンジンプラットフォームからそれを行うが、私はそれを実装するためにクライアント側で苦労しています。どんな助けも高く評価されます。

スクリーンショット

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

愚か私はインポートを忘れました&を使用ndb。今のところangularjsで私は適切な実装を学ぶまでgoogle-clientを使って捨てました。これは、代わりに角度のngResource依存関係を使用する「Google以外のクライアント」の回答です。 this githubの例をガイドとして使用しました。

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>

コントローラ。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のメソッドを呼び出すことができます。