質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.53%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

AngularJS

AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

Q&A

2回答

14359閲覧

AngularJSでUnknown providerエラー

Zousan

総合スコア29

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

AngularJS

AngularJSはオープンソースのJavaScriptフレームワークです。ブラウザ上で動作するウェブアプリケーションの開発にMVCアーキテクチャを取り入れることを目的としています。

0グッド

1クリップ

投稿2015/06/17 14:14

編集2022/01/12 10:55

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

エラー

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

コントローラ

lang

1'use strict' 2 3angular.module('app') 4.controller('HomeController', function($scope){ 5 6}) 7.controller('SearchController', function($scope, YouTubeSearchService){ 8 $scope.$watch('searchWord', function(){ 9 YouTubeSearchService.search($scope.searchWord, null).then(function(data){ 10 $scope.response=data; 11 }); 12 }); 13 14})

サービス

lang

1'use strict' 2 3var API_KEY = "hogehoge" 4 5angular.module('app') 6.factory('YouTubeSearchService', function($http){ 7 var search = function(q, pageToken){ 8 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}) 9 .than(function(response){ 10 return response; 11 }); 12 }; 13 return { 14 search: search 15 }; 16})

app.js

lang

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

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

投稿2015/06/18 02:12

編集2015/06/18 02:14
chiku_

総合スコア1464

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

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

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

投稿2015/06/17 23:40

chiku_

総合スコア1464

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Zousan

2015/06/17 23:55

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

2015/06/18 00:01

下記で試してみてください。 サービス var app = angular.module('app'); app.factory("userService", ['$http', function($http) { // 省略 } ]); コントローラー app.controller('SearchController', ['$scope', 'YouTubeSearchService', function($scope, YouTubeSearchService) { // 省略 } ]);
naga3

2015/06/18 00:54

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

2015/06/18 01:29

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

2015/06/18 01:33

うーん・・・普通に動きますけどね グローバルコントローラーというのはfunctionで直に定義したコントローラーのことなので、それは確かに1.3で動かなくなりました。 しかし angular.module('app').controller('HogeController') の書きかたは出来るハズです。 そもそも angular.module('app', []) がモジュールの定義で、 angular.module('app') は定義されたモジュールの取得なので、変数に格納したものと違いは無いハズです。
naga3

2015/06/18 01:34

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

2015/06/18 01:39

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

2015/06/18 01:47

ざっと見たところapp.jsには問題なさそうです。 読み込みはapp.jsを先頭にしていますか? あと、angular.module('app', […]) という呼び出しが2回以上されているとコントローラーの定義が上書きされて上記のエラーが出るようですが、他のソースでそういう記述はありませんか?
Zousan

2015/06/18 01:58

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

2015/06/18 02:15

> そもそも 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

2015/06/18 02:26

乗りかかった船なのでこっちで試してみました。が エラーは出ませんでした。 YouTubeSearchServiceにいくつかtypoがあるので直してみてください。 pagetokenの後ろが「:」ではなく「,」 API_KEYの間隔が離れている than → then
Zousan

2015/06/18 10:37

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.53%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問