Angular Js 和 google 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.我希望它与 Google Cloud Endpoints 配合使用以创建后端接口.麻烦来了.
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初始化时引导angular:
- 删除 ng-app="myApp"
- 添加
<script 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');
}
感觉不错，但打电话怎么样?
这里是控制器:
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();
}
});
};
}]);
由于 angular，您的页面会神奇地更新.
And magically your page updates thanks to angular.
随时标记我出错的地方.
Feel free to mark anywhere I go wrong.
推荐答案
与引导或设置超时相比，在您发出服务器请求之前/期间让 Angular 加载是最有效的.我遵循了 AngularJS + Cloud Endpoints 中描述的建议:构建现代 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-app 指令像往常一样(没有引导)
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() 方法中执行初始化的原因是，您可以将尽可能多的代码放在 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.
这篇关于Angular Js 和 google api client.js (gapi)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
