angularjs youtube検索

ドットインストールにて「AngularJSで作るYouTube検索」をやってみているのですが、＃６での記述が動作しないのです。ご教授お願いいたします。

エラー内容は"$http is not defined"とのことでして、
myscrip.js の以下の箇所でエラーになります。

 $http.jsonp(url).success(function(data){

index.html

<!DOCTYPE html>
<html lang="ja" ng-app="formExample">
<head>
    <meta charset="UTF-8">
    <title>AnugluarJS YOUTUBE search</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
    <script src="myscript.js"></script>
</head>
<body>
    <h1>YOUTUBE SEARCH</h1>    
     <div ng-controller="ExampleController">
        <form ng-submit="doSearch()" name="myForm">
            <input type="text" ng-model="query" required>
            <input type="submit" value="search" ng-disabled="myForm.$invalid">
        </form>
        <h2>Results</h2>
        <ul ng-show="result.length" sytle="list-style:nome; padding:0">
            <li ng-repeat="result in results">
                <img ng-src="{{result.media$group.media$thumnail[0].url}}">
                {{result.title.$t}}
            </li>
        </ul>
        <p ng-hide="result.length" >上から検索してください。</p>
     </div>
</div>
</body>
</html>

myscript.js

angular.module('formExample', [])
    .controller('ExampleController', ['$scope', function($scope) {
      $scope.doSearch = function(){
          var url = 'https://gdata.youtube.com/feeds/api/videos?';
            +[
              'q=' +encodeURIComponent($scope.query),
              'alt=json',
              'max-results=10',
              'v=2',
              'callback=JSON_CALLBACK'
            ].join('&');
            $http.jsonp(url).success(function(data){
              //console.dir(data);
              $scope.results = data.feed.entry;
            });
      }
    }]);

行動規範の内容に同意します

回答2件

$httpはangularjsの組み込みサービスの一つですが、こうしたサービスやファクトリを使用するには、コントローラー関数の引数として宣言しておく必要があります。

JavaScript
1angular.module('formExample', [])
2    .controller('ExampleController', ['$scope', '$http', function($scope, $http) {

コントローラーの冒頭部分をこのように修正する必要があります。
ご参考になれば。

投稿2016/06/19 01:00

tkanda

総合スコア2425

コントローラに$httpサービスを注入していないため、$httpが使えていないようです。
下記内容に変更してみてください。

javascript
1.controller('ExampleController', ['$scope', function($scope) //ここを

javascript
1.controller('ExampleController', ['$scope', '$http', function($scope, $http) //こう

これで動きます...と言いたいところなのですが、たぶん動きません。
というのも、このサンプルで使われているAPI「YouTube Data API v2」は2015年に提供が
終了していて、現在は後継の「YouTube Data API v3」が公開されています。
v2とは少し勝手が違うので詳しくは検索してみてください。
いくつか関係がありそうなリンクを貼っておきますね。

YouTube Data API v3 に向けて
http://googledevjp.blogspot.jp/2014/03/youtube-data-api-v3.html

YouTube Data API v3をつかって動画を検索する（ログインなし）
http://kimizuka.hatenablog.com/entry/2015/06/01/000000_1

投稿2016/06/19 00:51