Page 205 - AngularJS权威教程

18.10 运行 185

var po = document.createElement('script'); 1
po.type = 'text/javascript';
po.async = true;
po.src = 'https://apis.google.com/\js/client:plusone.js?onload=onLoadCallback';
var s = document.getElementsByTagName('script')[0]; 2
s.parentNode.insertBefore(po, s);
})();
</script> 3
</body>
</html>
现在，注意我们给Google JavaScript库添加了一个onload回调，并且没有使用ng-app来启动 4
我们的应用。如果让Angular自动启动我们的应用，我们会进入一个竞态条件。在这种条件下，
Google API可能在应用启动时尚未加载。 5
应用的这种不确定性会让体验变得无法使用，所以，我们要在onLoadCallback中手动启动应用。

为了手动启动应用，我们在window服务中添加了onLoadCallback函数。在我们能启动 6
Angular之前，需要确认Google登录客户端已经加载。

Google API客户端，或者gapi，是在运行时间被包含进来的，并且是被默认设置的，以便延 7
迟加载服务。通过告诉gapi.client在启动应用之前提前加载oauth2库，我们避免了任何潜在的
oauth2库不可用的后果。 8

// in scripts/app.js
window.onLoadCallback = function() { 9
// 当文档对象准备好了
angular.element(document).ready(function() {
// 启动oauth2库
gapi.client.load('oauth2', 'v2', function() { 10
// 最后，启动我们的Angular应用
angular.bootstrap(document, ['myApp']);
}); 11
});
}

必要的库创建好了，而且我们的应用也做好了启动的准备，这时我们可以建立应用的授权部分。 12

18.10 运行 13

鉴于我们是在使用一个服务，它取决于我们的URL是一个预期的URL，我们需要运行一个服
务器，而不是简单地在浏览器中加载HTML。 14
我们推荐使用非常简单的Python SimpleHTTPServer来提供文件目录。这个python服务器是写
来提供当前目录的，这个目录会被在本机当作一个web服务器运行。我们可以使用SimpleHTTPServer 15
来假装是在web服务器上运行一个应用，并且把它加载到web浏览器中。
16
$ cd PROJECT_DIRECTORY
$ python -m SimpleHTTPServer 9000
现在可以在浏览器中加载URL http://localhost:9000/ ，并且看到我们的Angular应用在浏览器 17
中运行。
18