角js和谷歌API client.js（GAPI） [英] Angular Js and google api client.js (gapi)
问题描述
我花了一天的时间做它的工作原理，所以我想我的经验可能是从别人有用。也许有些人会发现改善。
It took me one day to make it works so I think my experience may be useful from someone. And maybe some others will find improvement.
于是我开始angularJS前两天。我想它与谷歌云端点工程，以创建一个后台界面。这里来麻烦我。
So I start angularJS two days ago. And I want it works with Google Cloud Endpoints to create a backend interface. Here comes the trouble for me.
有关GAPI JavaScript客户端自带的异步加载，所以角初始化会崩溃有GAPI不确定的。
The javascript client for gapi comes with asynchronous loading, so angular initialization will crash having gapi undefined.
所以，你需要引导角时GAPI初始化：
- 删除NG-应用=对myApp
- 添加
＆LT;脚本src=\"https://apis.google.com/js/client.js?onload=googleOnLoadCallback\"></script> -
添加回调：
- remove ng-app="myApp"
- Add
<script src="https://apis.google.com/js/client.js?onload=googleOnLoadCallback"></script> Add the callback:
function googleOnLoadCallback(){
var apisToLoad = 1; // must match number of calls to gapi.client.load()
var gCallback = function() {
if (--apisToLoad == 0) {
//Manual bootstraping of the application
var $injector = angular.bootstrap(document, ['myApp']);
console.log('Angular bootstrap complete ' + gapi);
};
};
gapi.client.load('helloWorld', 'v1', gCallback, '//' + window.location.host + '/_ah/api');
}
感觉不错，但怎么样打个电话？
因此，这里是控制器：
So here is the controller:
angular.module('myApp.controllers', []).
.controller('MyCtrl', ['$scope' ,'helloWorldService',
function($scope,greetingsService) {
helloWorldService.loadData($scope);
}]);
和这里的服务：
angular.module('myApp.services', [])
service('helloWorldService', [function() {
this.loadData = function($scope) {
//Async call to google service
gapi.client.helloWorld.greetings.listGreeting().execute(
function(resp) {
if (!resp.code) {
console.debug(resp);
$scope.greetings = resp.items;
// Because it's a callback,
// we need to notify angular of the data refresh...
$scope.$apply();
}
});
};
}]);
和神奇的网页由于角度的更新。
And magically your page updates thanks to angular.
随意无论我去哪里错了标记。
Feel free to mark anywhere I go wrong.
推荐答案
而不是白手创业，或设置超时，这是最有效的前角，让负载/而你正在做的服务器的请求。我跟着<一个描述的通知href=\"https://cloud.google.com/developers/articles/angularjs-cloud-endpoints-recipe-for-building-modern-web-applications/\">AngularJS +云终端：a。对于建设现代Web应用程序，该做以下几招
Rather than bootstrapping or setting a timeout, it's most efficient to let Angular load before/while you're making the server requests. I followed the advice described in AngularJS + Cloud Endpoints: A Recipe for Building Modern Web Applications, which does the following.
请您 NG-应用指令类似（无引导）
Keep your ng-app directive as usual (no bootstrapping)
<html ng-app="myApp">
<head>
<script src="angular.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<script src="https://apis.google.com/js/client.js?onload=init"></script>
</head>
<body ng-show="backendReady">
在您随时随地JS创建的GAPI回调函数的全局变量
Create a global variable for the GAPI callback function anywhere in your JS
var app = angular.module('myApp', []);
var init = function() {
window.initGapi();
}
app.controller('MainController', function($scope, $window, gapiService) {
var postInitiation = function() {
// load all your assets
}
$window.initGapi = function() {
gapiService.initGapi(postInitiation);
}
});
app.service('gapiService', function() {
this.initGapi = function(postInitiation) {
gapi.client.load('helloWorld', 'v1', postInitiation, restURL);
}
});
从上面的链接：
为什么你不希望在第一个init（）方法执行初始化的原因是这样可以把尽可能多的code的尽可能在AngularJS世界，如控制器，服务和指令。其结果是，你可以利用AngularJS的全部功能，让你的所有的单元测试，集成测试，等等。
The reason why you would not want to execute the initialization in the first init() method is so you can put as much of the code as possible in the AngularJS world, such as controllers, services and directives. As a result, you can harness the full power of AngularJS and have all your unit tests, integrations tests,and so forth.
这似乎是一个做事的迂回方式，但它速度，可测试性优化，的和的关注点分离。
This may seem like a roundabout way of doing things, but it optimizes for speed, testability, and separation of concerns.
这篇关于角js和谷歌API client.js（GAPI）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
