Angularjs loading Google Api -
i'm having issue using google api in angularjs 1.3 (spa using ui.router). per google api instructions, added reference client.js file call in index.html head,
<html ng-app="myapp"> <head> <script src="scripts/jquery-2.1.3.min.js"></script> <script src="scripts/angular.min.js"></script> <script src="scripts/angular-ui-router.min.js"></script> <script> function loadgapi() { } </script> <script type="text/javascript" src="https://apis.google.com/js/client.js?onload=loadgapi"></script>
as understand, client.js asynchronously load full client api, , when complete call defined function loadgapi.
sometimes loadgapi called before angular app .run called, , not. don't mind loads asynchonously.. how can alert angular app indeed ready use?
i faced similar before , there 2 ways of solving it, 1 delaying whole angular's bootstrapping till other library gets loaded triggering manually after loadgapi , dom ready, like:
var n = 0; function loadgapi () { // pass after first call if (n++) { angular.bootstrap(angular.element(document).find('html'), ['app']); } }; angular.element(document).ready(loadgapi);
and other 1 ensuring library's presence ui-router states needing using resolve:
state
$stateprovider ... .state('some.state', { url : '/some', templateurl: 'view/some.state.html', controller : 'some.state', resolve : gapi.resolver }) ...
resolver
var gapi = { ready : false, resolver: { api: ['$q', function($q) { if (!gapi.deferred) { gapi.deferred = $q.defer(); } if (gapi.ready) { gapi.deferred.resolve(); } return gapi.deferred.promise; }] } }; window.loadgapi = function () { gapi.ready = true; if (gapi.deferred) { gapi.deferred.resolve(); } };
the second 1 can simplified, hope idea.
Comments
Post a Comment