Olá, eu encontrei alguns tutoriais e estava tentando criar meus próprios services e chamar no controller, mas ainda tenho dificuldades com funções e passagem de parâmetros.
Eu entendi como funciona os exemplos, mas eu não consegui dividir o que é do controller e o que faz parte do service.
A função $scope.getYoutubeData faz a requisição e depois é chamada na função que carrega os próximos resultados:
$scope.callNextPageFn = function(nextPage){
$scope.nextPage = nextPage;
$scope.getYoutubeData($scope.youtubeSearchText);
};Esse exemplo é do controller que funciona:
app.controller('youtubeController', function($scope,$http,$filter) {
$scope.youtubeData = [];
$scope.nextPage = "";
$scope.youtubeSearchText = "";
$scope.getYoutubeData = function(searchText){
$http.get('https://www.googleapis.com/youtube/v3/search', {
params: {
key: "API Key",
part: 'contentDetails',
type: 'video',
maxResults: '12',
pageToken: $scope.nextPage ? $scope.nextPage : '',
part: 'id,snippet',
fields: 'items/id,items/snippet/title,items/snippet/description,items/snippet/thumbnails/default,items/snippet/channelTitle,nextPageToken,prevPageToken',
q: 'searchText'
}
}).success( function (data) {
if (data.items.length === 0) {
$scope.youtubeData = 'No results were found!';
}
$scope.youtubeSearchText = searchText;
$scope.youtubeData = data.items;
console.log(data.items);
$scope.nextPageToken = data.nextPageToken;
$scope.prevPageToken = data.prevPageToken;
});
};
$scope.checkDataLength = function(data){
return (data.length >=1);
};
$scope.callNextPageFn = function(nextPage){
$scope.nextPage = nextPage;
$scope.getYoutubeData($scope.youtubeSearchText);
};
});Essa é a tentativa de dividir:
app.controller('ListaVideos', []);
var channelId = 'UC2pmfLm7iq6Ov1UwYrWYkZA';
var key = 'APl Key';
app.factory('youtubeService', ['$http', function ($http) {
function getPlaylistItems(id) {
return $http.get('https://www.googleapis.com/youtube/v3/playlistItems', {
params: {
part: 'snippet',
playlistId: id,
key: key,
}
});
}
return {
getPlaylistItems: getPlaylistItems
}
}]);
app.controller('VideoPlayerController', ['$http','$scope','youtubeService', function ($http, $scope, youtubeService) {
$scope.youtubePlaylist = [];
youtubeService.getPlaylistItems('PLhEguvmo7mSPjBv1XHxJn7A3zHLFTLSFT')
.then(function (response) {
console.log(response.data.items)
$scope.youtubePlaylist = response.data.items;
$scope.nextPageToken = response.data.nextPageToken;
})
$scope.checkDataLength = function(data){
return (data.length >=1);
};
$scope.callNextPageFn = function(nextPage){
$scope.nextPageToken = nextPage;
console.log(nextPage);
console.log(youtubeService.getPlaylistItems('PLhEguvmo7mSPjBv1XHxJn7A3zHLFTLSFT'));
};O que acontece, eu tentei repetir a função scope.getYoutubeData($scope.youtubeSearchText) com youtubeService.getPlaylistItems('PLhEguvmo7mSPjBv1XHxJn7A3zHLFTLSFT'), mas eu vi que não é a mesma coisa, porque isso retorna outra coisa.
Eu entendi errado? A função youtubeService.getPlaylistItems não faz o mesmo que scope.getYoutubeData?
Eu acho que o que tem que ficar no service é a parte da requisição, não? Mas e depois para chamar no controller?
No youtubeController ele só lista se passar um valor no input, como eu listo um resultado aleatório pra não deixar vazio, porque eu tentei executar a função $scope.getYoutubeData('alguma palavra chave') que lista e depois a busca não funcionava mais, se a pessoa digitasse.
