Javascript 使用Angular和Youtube API显示播放列表和视频详细信息_Javascript_Jquery_Angularjs_Youtube

Javascript 使用Angular和Youtube API显示播放列表和视频详细信息

javascript jquery angularjs youtube

Javascript 使用Angular和Youtube API显示播放列表和视频详细信息,javascript,jquery,angularjs,youtube,Javascript,Jquery,Angularjs,Youtube,我对Angular还不熟悉，但我想通过使用Youtube API v3，我会被它弄湿脚的。我正在努力从一个频道获取播放列表，以便在html页面的下拉列表中显示。此外，当从下拉列表中选择播放列表时，我希望显示所选播放列表中每个视频的标题和缩略图。我是新来的，所以我非常感谢你的帮助以下是我所拥有的： <html lang="en"> <head> <title>Angular Example</title> <meta char

我对Angular还不熟悉，但我想通过使用Youtube API v3，我会被它弄湿脚的。我正在努力从一个频道获取播放列表，以便在html页面的下拉列表中显示。此外，当从下拉列表中选择播放列表时，我希望显示所选播放列表中每个视频的标题和缩略图。我是新来的，所以我非常感谢你的帮助

以下是我所拥有的：

<html lang="en">
<head>
    <title>Angular Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/jquery-1.11.3.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/angular.min.js"></script>

    <script>

        var app = angular.module('ph', []);
        var key = '';

        app.factory('youtubeService', ['$http', function ($http) {

            function getPlaylists(channelId) {
                return $.get("https://www.googleapis.com/youtube/v3/channels", { params: {part: 'snippet', channelId: channelId, key: key} });
            }

            function getPlaylistVideos(id) {
                return $http.get('https://www.googleapis.com/youtube/v3/videos', { params: { part: 'snippet', id: id, key: key } });
            }

            return { getPlaylists: getPlaylists, getPlaylistVideos: getPlaylistVideos }

        }]);


        app.controller('ctrl', ['$http', '$scope', 'youtubeService', function ($http, $scope, youtubeService) {

            youtubeService.getPlaylists('UC1P0NQW6aixa5SUTbPF5CjQ').then(function (response) {
                $scope.playlists = response.data.items;
            });

            $scope.getPlaylistVideos = function (selection) {
                youtubeService.getPlaylistVideos(selection.snippets.id).then(function (response) {
                    $scope.playlistvideos = response.data.items;
                });
            }
        }]);
    </script>
</head>

<body ng-app="ph">
<div class="row">
    <!-- BEGIN Playlist Section -->
    <section id="playlistsection">
        <div class="col-lg-12">
            <div class="col-lg-6">
                <table id="playlistvideostable" class="table table-responsive table-striped">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Thumbnail</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="video in playlistvideos">
                            <td>
                                {{video.snippet.title}}
                            </td>
                            <!--<td>
                                <img src="{{video.snippet.thumbnails.default.url}}" alt="Video Image"/>
                            </td>-->
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="col-lg-6">
                <h3>Available</h3>
                <hr>
                <select id="playlists"
                        ng-options="playlist.snippet.title for playlist in playlists track by playlist.snippet.id"
                        ng-model="data.selectedOption"
                        ng-change="getPlaylistVideos(data.selectedOption)"
                        class="form-control">
                </select>
            </div>
        </div>
    </section>
    <!-- END Playlist Section -->
</div>


</body>

</html>

您的代码有几个问题：

您的代码中没有定义控制器，没有它，您的作用域将不会更新

API调用缺少筛选器，例如categoryid

您正在使用$获取播放列表，这是一个Jquery请求。使用$http

由于上述原因，您将离开angular，这将导致它无法跟踪范围更新。使用$scope.$apply包装分配将修复此问题。但是，使用$http将不需要这样做

请参阅下面的代码更新版本，该版本有效。我没有继续关于视频播放列表方面的事情，你可以做一些练习

<html lang="en">
<head>
  <title>Angular Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <script src="js/jquery-1.11.3.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script src="js/angular.min.js"></script>

  <script>

        var app = angular.module('ph', []);
        var key = 'AIzaSyAYPrc9K2Fa2GopcBMuFNRxpAQrVJJvzC0';

        app.factory('youtubeService', ['$http', function ($http) {

            function getPlaylists(channelId) {
              return $.get("https://www.googleapis.com/youtube/v3/channels", { part: 'snippet', channelId: channelId, key: key, categoryId: "GCQmVzdCBvZiBZb3VUdWJl" });
            }

            function getPlaylistVideos(id) {
                return $http.get('https://www.googleapis.com/youtube/v3/videos', { params: { part: 'snippet', id: id, key: key } });
            }

            return { getPlaylists: getPlaylists, getPlaylistVideos: getPlaylistVideos }

        }]);


        app.controller('ctrl', ['$http', '$scope', 'youtubeService', function ($http, $scope, youtubeService) {

          youtubeService.getPlaylists('UC1P0NQW6aixa5SUTbPF5CjQ').then(function (response) {
              $scope.$apply(function () {
                $scope.playlists = response.items;
            })
            });

            $scope.getPlaylistVideos = function (selection) {
                youtubeService.getPlaylistVideos(selection.snippets.id).then(function (response) {
                    $scope.playlistvideos = response.data.items;
                });
            }
        }]);
  </script>
</head>

<body ng-app="ph">
  <div class="row">
    <!-- BEGIN Playlist Section -->
    <section id="playlistsection">
      <div class="col-lg-12" ng-controller="ctrl">
        <div class="col-lg-6">
          <table id="playlistvideostable" class="table table-responsive table-striped">
            <thead>
              <tr>
                <th>Name</th>
                <th>Thumbnail</th>
              </tr>
            </thead>
            <tbody>
              <tr ng-repeat="video in playlistvideos">
                <td>
                  {{video.snippet.title}}
                </td>
                <!--<td>
                    <img src="{{video.snippet.thumbnails.default.url}}" alt="Video Image"/>
                </td>-->
              </tr>
            </tbody>
          </table>
        </div>
        <div class="col-lg-6">
          <h3>Available</h3>
          <hr>
          <select id="playlists"
                  ng-options="playlist.snippet.title for playlist in playlists track by playlist.snippet.id"
                  ng-model="data.selectedOption"
                  ng-change="getPlaylistVideos(data.selectedOption)"
                  class="form-control"></select>
        </div>
      </div>
    </section>
    <!-- END Playlist Section -->
  </div>


</body>

</html>

包裹应用，因为您的步骤超出了角度

              $scope.$apply(function () {
                $scope.playlists = response.items;
            })

谢谢建议您尽快清空/删除youtube密钥：）

<div class="col-lg-12" ng-controller="ctrl">

            function getPlaylists(channelId) {
              return $.get("https://www.googleapis.com/youtube/v3/channels", { part: 'snippet', channelId: channelId, key: key, categoryId: "GCQmVzdCBvZiBZb3VUdWJl" });
            }

              $scope.$apply(function () {
                $scope.playlists = response.items;
            })