Quick newbie question on MVC structure with angularjs


#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 = "AIzaSyB-c1R9L0kEwfy9I73NexVlgCqf5SiV5_I";
      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


#2

From one angularjs n00b to another, the pain of trying to piece this all together for the first time is pretty fresh for me. So I’ll give you my thoughts from what I’ve learned and maybe someone else will chime in and i’ll learn something too.

The code above looks to me like it belongs in a service or factory, because it gets data. The same would be true if you were setting some data - whether from a remote server or local storage. That’s what services and factories are for. So a likely place for this code could be in services.js, or maybe in factories.js, which you’d have to create. You would then have some code, perhaps in controllers.js that makes a call to this service, and the callback function that you pass into this service would set some $scope variable equal to the result set. You could then reference this $scope variable in one of your views (html file in www/templates), perhaps in an ion-list with an ng-repeat directive to iterate over the results and display them as list items, for example.

Some n00b gotchas: You need to inject your newly created service into the controller for it to be able to use it. You also need to attach your controller to the view (likely done in app.js - look at the examples there).

Your index.html won’t really do any “work”, but you would leave the reference to google apis there in the index file.


#3

Awesome stuff @SuperNiCd! I like your attitude :smile:
I’ll look into this tonight and report back.
When I have it working, sooner or later, I’ll post the full details.


#4

I got stuck… It got confusing with the callback function and also how to get the data onto the DOM… think you can post some code to help?


#5

This one’s interesting because it’s not quite a regular web service, I guess. The code actually executes on Google’s infrastructure? I played around with it but ran out of time before I got it working. I found this article which seems to address how to bring something like this into AngularJS.

I will try to get back to it later, as it is interesting. Wonder if anyone else here on the forum has made something like this work…


#6

OK, actually got this working… this is a fork of one of the Ionic list item examples, pulling the playlist from Google. EDIT: Not really sure how to embed the whole Codepen example in here, but the link seems to work anyway.

See the Pen Ionic List with Google Cloud Endpoint Data by (@SuperNiCd) on CodePen.


#7

Thanks this works like a charm. BTW, did you use the Browser API key or Android/iOS API keys? Thanks


#8

In the Codepen linked above, I used the API key that was provided in the first post. Since it is not my API key, I’m not sure which one it was. Perhaps @tommysollen can comment.


#9

Thanks again @SuperNiCd.

I keep getting a “too much recursion” error or “Uncaught RangeError: Maximum call stack size exceeded” due to the init.js file in the console log.

How do I tweak this code:

function init()
{
	window.init();
	console.log('init');
}

To prevent this?

Thanks again.