Menu
I have read through the following recipe, which shows a way to power an AngularJS frontend with a Google Cloud Endpoints backend:
https://cloud.google.com/resources/articles/angularjs-cloud-endpoints-recipe-for-building-modern-web-applications
What I don't understand is the appendix on the AngularJS and Cloud Endpoints initialization. The relevant section is the following:
Appendix: Tips on AngularJS + Cloud Endpoints Initialization Tip #1: Be careful on the initialization sequence
The guestbook app loads three different JS libraries in the following sequence:
- AngularJS
- The guestbook app
- Google API Client, which contains the Endpoints functionalities
To follow this sequence, the index.html contains the following
<script>tags in the<head>tag for loading each of the JS libraries:<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>Once loaded, the third library (Google API Client) calls the initialization function specified by its ‘onload’ parameter. In this case, the init() function is expected and invoked. Tip #2: Enter into the AngularJS world as quickly as possible
In the initialization sequence, we use the two functions:
init() function window.init() functionThis init() function is defined in guestbook.js in the following way:
function init() { window.init(); }As you can see the code above, the function just calls window.init() function (i.e. init() function defined in the global window object) and does nothing else. The window.init() is defined in the AngularJS controller as follows:
$window.init= function() { $scope.$apply($scope.load_guestbook_lib); };In AngularJS, the global window object is accessed by “$window” notation which is a wrapper for it. It is a best practice in AngularJS not to access the window object directly to improve testability.
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.
It seems that a global function init() is being defined in an external javascript file. This init() function just calls window.init() (and is supposed to be called by the Google client library after it has loaded). But isn't window.init() nothing but the globally defined init() function? So wouldn't we get a loop here until window.init() (and thus init()) is being redefined?
652
window. onload = init(); assigns the onload event to whatever is returned from the init function when it's executed. init will be executed immediately, (like, now, not when the window is done loading) and the result will be assigned to window.
init is just shorthand for initiate. Typically it is used to create a "new Object()". Like the init() function in jQuery returns a new jQuery object.
onload=init because onload is a method of the window object, so you must always precede it with window. for it to work. By omitting the parentheses when you assign the init function to the onLoad property, the function does not run immediately; instead, it runs when the load event occurs after the page is fully loaded.
Next the jQuery() function is called, passing in a function name ( init ). This causes the init() function to run as soon as the page's DOM is loaded: $( init ); The init() function itself uses jQuery to fade all h1 headings in the Web page out, then in.
This example tries to take the google api init event and transfer it to AngularJS scope.
When
<script src="https://apis.google.com/js/client.js?onload=init"></script>
is loaded it calls the init function defined globally, which in turn calls the init method defined on the window object. Since this function has access to the angular scopes, it plays well with angular
It makes it easier to wrap cloud endpoint calls in promises
Here is how to make it much easier http://anandsekar.github.io/initialize-google-appengine-and-angularjs/
189
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
