问题描述
我花了一天的时间做它的工作原理，所以我想我的经验可能是从别人有用。也许有些人会发现改善。
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.
推荐答案
而不是白手创业，或设置超时，这是最有效的前角，让负载/而你正在做的服务器的请求。我跟着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的全部功能，让你的所有的单元测试，集成测试，等等。
这似乎是一个做事的迂回方式，但它速度，可测试性优化，的和的关注点分离。
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）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！