AngularJSでUnknown providerエラー

Question

AngularJsのサービスを使用しようと考え以下のコードを書いたのですが、以下のエラーが出てしまいました。どこが違ってるかわかりますか?

エラー

Error: [$injector:unpr] Unknown provider: YouTubeSearchServiceProvider <- YouTubeSearchService <- SearchController

コントローラ

'use strict'

angular.module('app')
.controller('HomeController', function($scope){

})
.controller('SearchController', function($scope, YouTubeSearchService){
  $scope.$watch('searchWord', function(){
    YouTubeSearchService.search($scope.searchWord, null).then(function(data){
      $scope.response=data;
    });
  });

})

サービス

'use strict'

var API_KEY = "hogehoge"

angular.module('app')
.factory('YouTubeSearchService', function($http){
  var search = function(q, pageToken){
    return $http.get('https://www.googleapis.com/youtube/v3/search', {q: q, pageToken: pagetoken: maxResults: 20, type: video, videoEmbeddable: true, videoSyndicated: true, part: "id,snippet", key: AP    I_KEY})
      .than(function(response){
        return response;
      });
  };
  return {
    search: search
  };
})

app.js

  1 angular
  2   .module('app', [
  3     'ui.router'
  4   ])
  5   .config(['$stateProvider', '$urlRouterProvider', function($stateProvider,
  6       $urlRouterProvider) {
  7     $stateProvider
  8       .state('home', {
  9         url: '/',
 10         templateUrl: 'views/home.html'
 11       })
 12       .state('search', {
 13         url: '/search',
 14         templateUrl: 'views/search.html',
 15         controller: 'SearchController'
 16       })
 17       .state('ranking', {
 18         url: '/ranking',
 19         templateUrl: 'views/ranking.html',
 20         controller: 'RankingController'
 21       })
 22       .state('inquery', {
 23         url: '/inquery',
 24         templateUrl: 'views/inquery.html',
 25       });
 26
 27     $urlRouterProvider.otherwise('home');
 28   }]);

Answer 1

(間違えて、投稿した為、削除)

Answer 2

AngularJsのバージョンは1.3以上でしょうか？
angular.module('app')で随時コントローラとサービスの定義がされていますが、バージョン1.3以上の場合、
var app = angular.module('app')
などしてappを使い回す必要があります。

jsファイルはコントローラ定義jsより先にサービス定義jsを読み込まれてますか？
コントローラ定義jsを先に読み込んでいるようだとサービス定義がされていないのでインジェクションで失敗します。

Comments

[Zousan]

回答ありがとうございます。確かにコントローラがサービスよりも先に読み込まれていました。そこを直したところ今度は`Error: [ng:areq] Argument 'SearchController' is not a function, got undefined`というエラーがでるようになりました。
また、私はServiceを定義しているservices.jsとコントローラを定義しているcontrollers.jsという2つのファイルでそれぞれコントローラとサービスを定義しています。この場合angular.module('app')を使いまわすにはどのようにすればいいのでしょうか。

[chiku_]

下記で試してみてください。

サービス
var app = angular.module('app');
app.factory("userService", ['$http', function($http) {
// 省略
} ]);

コントローラー
app.controller('SearchController',
['$scope', 'YouTubeSearchService',
function($scope, YouTubeSearchService) {
// 省略
} ]);

[naga3]

バージョン1.3以上でも普通に
angular.module('app').controller・・・
angular.module('app').factory・・・
で定義できると思いますが…

[chiku_]

1.3ではグローバルコントローラーはデフォでは動かない記憶が。。
http://qiita.com/uchikoshi22/items/07b77b711a1f31953036

[Zousan]

やってみましたが、上記エラーとかわりませんでした。

[naga3]

うーん・・・普通に動きますけどね

グローバルコントローラーというのはfunctionで直に定義したコントローラーのことなので、それは確かに1.3で動かなくなりました。

しかし angular.module('app').controller('HogeController') の書きかたは出来るハズです。

そもそも angular.module('app', []) がモジュールの定義で、 angular.module('app') は定義されたモジュールの取得なので、変数に格納したものと違いは無いハズです。

[naga3]

>Zousan

angular.module('app', []) の定義はありますか？

[Zousan]

>naga3
app.jsで定義されていますがそれではダメでしょうか。
一応app.jsを追記します。

[naga3]

ざっと見たところapp.jsには問題なさそうです。

読み込みはapp.jsを先頭にしていますか？

あと、angular.module('app', […]) という呼び出しが2回以上されているとコントローラーの定義が上書きされて上記のエラーが出るようですが、他のソースでそういう記述はありませんか？

[Zousan]

サードパーティーのライブラリ読み込みのあとにapp.js, services.js, controllers.jsの順番で読み込んでいます。
2回以上呼び出されているところはありません。

[chiku_]

> そもそも angular.module('app', []) がモジュールの定義で、 angular.module('app') は定義されたモジュールの取得なので、変数に格納したものと違いは無いハズです。
なるほど、そういえばそうですね。勘違いして覚えてしまっていたみたいです。
ご指摘ありがとうございます。

下記は参考になりませんか？
https://coderwall.com/p/eeqo7q/debugging-unknown-provider-error-in-angular

エラーメッセージからしてそれっぽいです。
angular.module('app')
.factory('YouTubeSearchService', function($http){
などを
angular.module('app')
.factory('YouTubeSearchService', ['YouTubeSearchService', function($http){
に変更

[naga3]

乗りかかった船なのでこっちで試してみました。が
エラーは出ませんでした。

YouTubeSearchServiceにいくつかtypoがあるので直してみてください。
pagetokenの後ろが「:」ではなく「,」
API_KEYの間隔が離れている
than → then

[Zousan]

お返事遅れてしまいもうしわけありません。何故かIndex.htmlのScript読み込みの順番を変えてみたところ正常に動作するようになりました。ありがとうございました。