使用YoutubeAPI v3在AngularJS中提供服务

Services in AngularJS with YoutubeAPI v3

本文关键字:服务 AngularJS YoutubeAPI v3 使用      更新时间:2023-09-26

我以前使用过一次服务(仍然不是很擅长),我已经遇到了很多问题,所以知道我要问(我认为我的问题很简单:))

我需要得到一些ChannelDetails与使用YoutubeApi v3。

我的服务:

appApi.factory('ServiceAPI', ['$http', function($http) {
var factory = {};
    factory.channelDetails = function(channelname){
        return $http.get('https://www.googleapis.com/youtube/v3/channels?part=contentDetails&forUsername='+channelname+'&key=AIzaSyDQv-WpATIWLinCB3H_sH4W1sKx7plyvRA')
         .success(function(data) {
           return data;
         })
         .error(function(data) {
           return data;
         });
         }
}]);

then my controller:

var appApi = angular.module('YoutubeAPI', ['ngRoute'])
appApi.controller('youtubeCTRL', ['$scope','$http','$q','ServiceAPI', function ($scope, $http, $q, ServiceAPI) {
    $scope.channel = [];
    //GET Id on channelname
    $scope.saveNewchlName = function () {
        var channelname = $scope.newchlName;
        $scope.channelDetails = function(channelname){
            ServiceAPI.channelDetails(channelname).success(function (data) {
                $scope.newchannelNames = {
                    channelName: $scope.newchlName,
                    channelId: data.items[0].id,
                    playlistId: data.items[0].contentDetails.relatedPlaylists.uploads
                };
                console.log($scope.newchannelNames)
                $http({
                    method: 'POST',
                    url: 'http://localhost:8080/api/resources/channelNames/',
                    data: $scope.newchannelNames,
                    dataType: 'json'
                }).success(function (data) {
                    $scope.channel.push(data);
                    console.log('SUCCESS!');
                    $scope.error = null;
                }).error(function (data, status) {
                    if (status == 401) {
                        $scope.error = "You are not authenticated to Post these data";
                        return;
                    }
                    $scope.error = data;
                });
    });
    }
}

我的问题是我总是遇到注射问题。现在我有一个说:提供者'ServiceAPI'必须从$get工厂方法返回一个值。

我需要在URL中实现channelname以获得具体的详细信息。

似乎可以。

服务:

    appApi.factory('ServiceAPI', ['$http', function($http) {
    var factory = {};
        factory.channelDetails = function(channelname, success, error){
            var promise = $http.get('https://www.googleapis.com/youtube/v3/channels?part=contentDetails&forUsername='+channelname+'&key=AIzaSyDQv-WpATIWLinCB3H_sH4W1sKx7plyvRA')
             if(success){
               promise.success(success);
             }
             if(error){
               promise.error(error);
             };
             }
             return factory;
    }]);

控制器:

var appApi = angular.module('YoutubeAPI', ['ngRoute'])
appApi.controller('youtubeCTRL', ['$scope','$http','$q','ServiceAPI', function ($scope, $http, $q, ServiceAPI) {
    $scope.channel = [];
    $scope.video = [];

    var pagetokenarr = [];
    //GET Id on channelname
        $scope.saveNewchlName = function () {
            var channelname = $scope.newchlName;
                ServiceAPI.channelDetails(channelname, function(data){
                    $scope.newchannelNames = {
                        channelName: $scope.newchlName,
                        channelId: data.items[0].id,
                        playlistId: data.items[0].contentDetails.relatedPlaylists.uploads
                    };
                    console.log($scope.newchannelNames)
                    $http({
                        method: 'POST',
                        url: 'http://localhost:8080/api/resources/channelNames/',
                        data: $scope.newchannelNames,
                        dataType: 'json'
                    }).success(function (data) {
                        $scope.channel.push(data);
                        console.log('SUCCESS!');
                        $scope.error = null;
                    }).error(function (data, status) {
                        if (status == 401) {
                            $scope.error = "You are not authenticated to Post these data";
                            return;
                        }
                        $scope.error = data;
                    });

        });
    }