使用angularjs快速入门MVC结构

我正试图从公共YouTube播放列表中列出视频，但我的环境中存在一个愚蠢的n00b问题。我对MVC的东西很陌生，对angularjs也很陌生。

我使用了Ionic Framework和他们的入门应用程序"；选项卡"；用于结构。这意味着我有这些文件：

• index.html
• app.js
• 控制器.js
• services.js
• 然后是一个名为templates的文件夹中的大部分html。它包含如下文件
• tabs.html
• tabs-dash.html

等等。

如果我在index.html 中的head标记中有脚本标记，那么下面的代码可以很好地工作

<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>

但我们现在不是这样在angular.js中滚动的，是吗？我应该把这个剧本移到某个地方——但在哪里？到apps.js？到controller.js？到services.js（我仍然不明白它是什么…）；视图"？！好吧，那就离题了，没关系。

如果我试图简单地将javascript复制粘贴到apps.js文件中，应用程序就会崩溃。如果我把它粘贴到controllers.js中的控制器中，它不会崩溃，但也不起作用。控制台上没有打印任何内容。

所以我想知道这里的最佳实践是什么，以及如何重写代码以在正确的位置工作？感谢