Having an issue with the Google API JavaScript client that I can't seem to solve.
Here's the script in my HTML file:
<script src="https://apis.google.com/js/client.js?onload=init"></script>
This is what my JavaScript code looks like:
function init() {
window.initGapi();
}
(function() {
"use strict";
var appControllers = angular.module('appControllers', ['ui.bootstrap']);
appControllers.controller('MusicCtrl', function($window, $modal, $scope ) {
$scope.list = function() {
gapi.client.youtube.search.list({
q: 'q',
part: 'snippet'
}).execute(function(response) {
$scope.songs = response.result.items;
$scope.$apply();
});
}
$window.initGapi = function() {
$scope.$apply($scope.load_youtube_api);
}
$scope.load_youtube_api = function() {
gapi.client.setApiKey('API_KEY');
gapi.client.load('youtube', 'v3', function() {
$scope.is_backend_ready = true;
$scope.list();
});
}
The $scope.is_backend_ready in the HTML will load the $scope.list() markup only when the API is loaded completely.
Encountering this error:
Uncaught TypeError: window.initGapi is not a function$scope.load_youtube_api during debugging allows the API to load successfully.
Confused as to why the initialization function window.initGapi(); can sometimes be undefined, especially when it should only load after the backend is ready. Got this code from Google Developers website, so I may be implementing it incorrectly. Any help would be appreciated.