使用Angular和Youtube API顯示播放列表和視頻詳細信息

我是Angular的新手，但我認爲我會通過使用Youtube API v3使自己的腳變得溼潤。我正在努力從一個頻道獲取播放列表，以顯示在html頁面的下拉菜單中。另外，從下拉列表中選擇播放列表時，我想顯示所選播放列表中每個視頻的標題和縮略圖。我是新來的，所以我會很感激一些幫助。使用Angular和Youtube API顯示播放列表和視頻詳細信息

以下是我有：

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

這裏是getPlaylists的例子帶回在JSON：

{ 
"kind": "youtube#channelListResponse", 
"etag": "\"0KG1mRN7bm3nResDPKHQZpg5-do/mtu1ek5RgV1XsIgIoPS7GNv8NkI\"", 
"pageInfo": { 
    "totalResults": 1, 
    "resultsPerPage": 1 
}, 
"items": [ 
    { 
    "kind": "youtube#channel", 
    "etag": "\"0KG1mRN7bm3nResDPKHQZpg5-do/TEgtFpLB_KhJ-XEwy-yOJneYIYw\"", 
    "id": "UC1P0NQW6aixa5SUTbPF5CjQ", 
    "snippet": { 
    "title": "Aaron Johnson", 
    "description": "", 
    "publishedAt": "2014-07-11T15:19:25.000Z", 
    "thumbnails": { 
    "default": { 
     "url": "https://yt3.ggpht.com/-py7sd_PnqBI/AAAAAAAAAAI/AAAAAAAAAAA/Q6pYI0EC7No/s88-c-k-no/photo.jpg" 
    }, 
    "medium": { 
     "url": "https://yt3.ggpht.com/-py7sd_PnqBI/AAAAAAAAAAI/AAAAAAAAAAA/Q6pYI0EC7No/s240-c-k-no/photo.jpg" 
    }, 
    "high": { 
     "url": "https://yt3.ggpht.com/-py7sd_PnqBI/AAAAAAAAAAI/AAAAAAAAAAA/Q6pYI0EC7No/s240-c-k-no/photo.jpg" 
    } 
    }, 
    "localized": { 
    "title": "Aaron Johnson", 
    "description": "" 
    } 
    } 
    } 
] 
}

來源

2015-11-09 user3788671

你必須與你的代碼的幾個問題：

您沒有在您的代碼中定義控制器，沒有它，您的範圍將不會更新。
API調用缺少過濾器，例如categoryid。
您正在使用$獲取播放列表，這是一個Jquery請求。使用$ http
由於上述原因，您正在超出角度範圍，導致其無法跟蹤範圍更新。使用$ 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>

的變化是：添加納克控制器屬性

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

發送在過濾器中。這也應該使用$ http而不是$ .get - 還要注意去除params包裝器。

  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; 
      })

來源

2015-11-10 00:29:17 Shaun

感謝之外。建議你消除/刪除你的YouTube密鑰儘快:) – Shaun

使用Angular和Youtube API顯示播放列表和視頻詳細信息

回答

相關問題