Ruby on rails 如何在角度控制器在rails应用程序中引用外部API之前加载它？_Ruby On Rails_Angularjs

Ruby on rails 如何在角度控制器在rails应用程序中引用外部API之前加载它？

ruby-on-rails angularjs

Ruby on rails 如何在角度控制器在rails应用程序中引用外部API之前加载它？,ruby-on-rails,angularjs,Ruby On Rails,Angularjs,我正在将youtube api加载到我的应用程序中。我的angular controller在api完全加载之前引用api，这会引发错误。如何在angular尝试调用api之前完全加载它 application.html.erb <!DOCTYPE html> <html> <head> <title>Movie Text Alert</title> <%= stylesheet_link_tag "appl

我正在将youtube api加载到我的应用程序中。我的angular controller在api完全加载之前引用api，这会引发错误。如何在angular尝试调用api之前完全加载它

application.html.erb

    <!DOCTYPE html>
<html>
<head>
  <title>Movie Text Alert</title>
  <%= stylesheet_link_tag    "application", media: "all" %>
  <link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700|Open+Sans:400,600' rel='stylesheet' type='text/css'>
  <%= javascript_include_tag "https://apis.google.com/js/client.js?onload=onClientLoad" %>
  <%= javascript_include_tag "vendor/modernizr" %>
  <%= csrf_meta_tags %>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body ng-app="movieApp">

  <%= yield %>

  <%= javascript_include_tag "application" %>


</body>
</html>

控制器代码

movieApp.controller('MovieController', [ '$http', '$scope', 'Movie', function($http, $scope, Movie) {

var apiURL = "http://api.themoviedb.org/3/movie/upcoming?api_key=d0a8b0361581f05b502a995a7cf2e923";
var poster_directory = "http://d3gtl9l2a4fn1j.cloudfront.net/t/p/w500";

$scope.movies = [ ];
var sorted_movie_array = [ ];

//call api and build sorted movie array to display on page
$http({ method: 'GET', url: apiURL })
    .success(function(data) {

        for(var i = 0; i < data.results.length; i++) {
            var movieObj = {
                title: '',
                poster: '',
                release_date: ''
            };

            //assign title
            movieObj.title = data.results[i].title;

            //assign poster image
            //no image available for the movie so we use a default image
            if (data.results[i].poster_path == null) {
                movieObj.poster = "/assets/no-image.png";
            }
            else {
                movieObj.poster = poster_directory + data.results[i].poster_path;
            }

            //assign release date
            movieObj.release_date = data.results[i].release_date;

            //call youtub api search function here
            search();

            sorted_movie_array.push(movieObj);
        }

         //sort by newest date
        sorted_movie_array.sort(function(a, b){
                var dateA = new Date(a.release_date);
                var dateB = new Date(b.release_date);
                return dateA - dateB;
        });

        $scope.movies = sorted_movie_array;

    })
    .error(function(data, status) {
        console.log(status);
    });

movieApp.controller（'MovieController'，['$http'，'$scope'，'Movie'，函数（$http，$scope，Movie）{
var apirl=”http://api.themoviedb.org/3/movie/upcoming?api_key=d0a8b0361581f05b502a995a7cf2e923";
var\u目录=”http://d3gtl9l2a4fn1j.cloudfront.net/t/p/w500";
$scope.movies=[]；
var排序的电影数组=[]；
//调用api并构建排序后的电影数组以显示在页面上
$http（{method'GET'，url:apiURL}）
.成功（功能（数据）{
对于（var i=0；i


youtube api代码
function search() {
    console.log("inside search function");
    onClientLoad();
    var query = "john wick trailer";
    // Use the JavaScript client library to create a search.list() API call.
    var request = gapi.client.youtube.search.list({
        part: 'snippet',
        q: query
    });
    // Send the request to the API server,
    // and invoke onSearchRepsonse() with the response.
    request.execute(onSearchResponse);
}

// Called automatically with the response of the YouTube API request.
function onSearchResponse(response) {
    showResponse(response);
}

// Helper function to display JavaScript value on HTML page.
function showResponse(response) {
    var yData = response;
    var imageURL, title, link;

    for (var i = 0; i < yData.items.length; i++) {
        imageURL = yData.items[i].snippet.thumbnails.default.url;
        title = yData.items[i].snippet.title;
        link = yData.items[i].id.videoId;
        console.log(link);
        //$('#images').append('<li><img src=' + imageURL + '><p><a href="http://www.youtube.com/watch?v=' + link + '">' + title + '</a></p></li>');
    }
}

函数搜索（）{
console.log（“内部搜索功能”）；
onClientLoad（）；
var query=“john wick拖车”；
//使用JavaScript客户端库创建search.list（）API调用。
var request=gapi.client.youtube.search.list({
部分：'代码片段'，
问：查询
});
//将请求发送到API服务器，
//并使用响应调用onSearchRepsonse（）。
请求。执行（onSearchResponse）；
}
//根据YouTube API请求的响应自动调用。
函数onSearchResponse（响应）{
showResponse（应答）；
}
//帮助器函数在HTML页面上显示JavaScript值。
函数showResponse（响应）{
var yData=响应；
var-imageURL、标题、链接；
对于（变量i=0；i”）；
}
}
我通过使用工厂创建一个youtube服务解决了这个问题，就像这样
movieApp.factory('YoutubeSvc', ['$resource', '$q', function($resource, $q){....

movieApp.factory('YoutubeSvc', ['$resource', '$q', function($resource, $q){....