1

I'm trying to list videos from a public YouTube playlist but I have a silly n00b problem in my environment. I'm new to this whole MVC stuff and also new to angularjs.

I've used Ionic Framework and their starter app "tabs" for structure. This means I have these files:

  • index.html
  • app.js
  • controllers.js
  • services.js
  • and then most of the html in a folder called templates. It contains files like
  • tabs.html
  • tabs-dash.html

etc.

The following code works fine if I have it as script tags inside the head tags in my index.html

<script>
                function load() {
          var playListID = "PLHSHVgZjuhS-DLWai4WIKv4cA83zUK0DI";
          var requestOptions = {
              playlistId: playListID,
              part: 'snippet',
              maxResults: 10
          };
          var apiKey = "AIzaSy...";
          gapi.client.setApiKey(apiKey);
          gapi.client.load('youtube','v3', function () {  
              var request = gapi.client.youtube.playlistItems.list(requestOptions);
              request.execute(function (data) {
                  console.log("testar");
                  console.log (data)
              });
          });

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

But that's not how we roll in angular.js now is it? I'm supposed to move this script somewhere - but where? To apps.js? To controller.js? To services.js(which I still don't understand what it is...) And where are the "views"?! Ok, that's off topic, never mind.

If I try to simply copy paste the javascript into the apps.js file the app crashes. If I paste it into a controller in controllers.js it doesn't crash but neither does it work. Nothing is printed to the console.

So I'm wondering what's the best practice here and how do I rewrite the code to work in the correct spot? Thanks

Benjamin Loison
  • 3,782
  • 4
  • 16
  • 33
Tommy Sollén
  • 251
  • 2
  • 4
  • 12

1 Answers1

0

This snippet

https://apis.google.com/js/client.js?onload=load

seems to suggest that it's looking for a function named load in the global scope. So I don't think you have much choice in this case.

Steve Lang
  • 539
  • 4
  • 8
  • But isn't that snippet just saying 1) include this client.js file 2) once loaded, run the function load right? Isn't it possible to rewrite that somehow? – Tommy Sollén Sep 11 '14 at 08:08
  • AFAIK, .js file inclusion and variables in the global scope is not really within the purview of AngularJS ... – Steve Lang Sep 11 '14 at 08:19
  • Ok @steve-lang let me rephrase: if I keep the code where it is, how can I access the data from youtube from the "correct" place? From within a controller or service (don't know which is more appropriate) – Tommy Sollén Sep 11 '14 at 08:49
  • A directive might be the answer: http://stackoverflow.com/questions/20447867/create-a-youtube-angularjs-directive – Steve Lang Sep 11 '14 at 09:00