6

我已经阅读了以下秘籍,它展示了一种使用 Google Cloud Endpoints 后端为 AngularJS 前端提供动力的方法:

https://cloud.google.com/resources/articles/angularjs-cloud-endpoints-recipe-for-building-modern-web-applications

我不明白的是关于 AngularJS 和 Cloud Endpoints 初始化的附录。相关部分如下:

附录:AngularJS + Cloud Endpoints 初始化技巧提示 #1:注意初始化顺序

留言板应用按以下顺序加载三个不同的 JS 库:

  • AngularJS
  • 留言簿应用程序
  • Google API 客户端,其中包含 Endpoints 功能

为了遵循这个顺序,index.html 在标签中包含以下 <script>标签,<head>用于加载每个 JS 库:

<script src="js/angular.min.js"></script>  
<script src="js/guestbook.js"></script>  
<script src="https://apis.google.com/js/client.js?onload=init"></script>

加载后,第三个库(Google API 客户端)调用其“onload”参数指定的初始化函数。在这种情况下,需要并调用 init() 函数。提示 #2:尽快进入 AngularJS 世界

在初始化序列中,我们使用了两个函数:

init() function
window.init() function

这个 init() 函数在 guestbook.js 中定义如下:

function init() {   window.init(); }

正如您在上面的代码中看到的那样,该函数只是调用 window.init() 函数(即在全局窗口对象中定义的 init() 函数)并没有做任何其他事情。window.init() 在 AngularJS 控制器中定义如下:

$window.init= function() {   
   $scope.$apply($scope.load_guestbook_lib);
};

在 AngularJS 中,全局窗口对象通过“$window”表示法访问,它是它的包装器。AngularJS 的最佳实践是不直接访问窗口对象以提高可测试性。

您不想在第一个 init() 方法中执行初始化的原因是您可以将尽可能多的代码放在 AngularJS 世界中,例如控制器、服务和指令。因此,您可以充分利用 AngularJS 的强大功能并进行所有单元测试、集成测试等。

似乎init()在外部 javascript 文件中定义了一个全局函数。这个init()函数只是调用window.init()(并且应该在加载后由谷歌客户端库调用)。但是 window.init() 不就是全局定义的init()函数吗?window.init()那么在(因此init())被重新定义之前,我们不会在这里得到一个循环吗?

4

2 回答 2

1

此示例尝试获取 google api init 事件并将其传输到 AngularJS 范围。

什么时候

<script src="https://apis.google.com/js/client.js?onload=init"></script>

加载它调用全局定义的 init 函数,该函数又调用定义在窗口对象上的 init 方法。由于此函数可以访问角度范围,因此它与 angular 配合得很好

它使将云端点调用包装在 Promise 中变得更加容易

以下是如何使它更容易 http://anandsekar.github.io/initialize-google-appengine-and-angularjs/

于 2014-10-07T05:24:24.060 回答
0

guestbook.js 定义了一个从您的描述中显示为全局的 init 函数。该初始化函数被传递给 google client.js。该全局初始化函数只是在 window.init 中调用(另一个)全局函数。首先加载的 Angular 模块应该通过 Angular 提供的 $window 设置 window.init。没有循环,client.js调用guestbook.js的init调用angular方法$window.init,和window.init一样。

于 2013-09-02T22:39:35.640 回答