$インジェクタ：modulerrモジュール

をインスタンス化できませんでした私はAngularJSに新たなんだと私はこの例外に直面

angular.js:68 Uncaught Error: [$injector:modulerr] Failed to instantiate module MovieRama due to: Error: [$injector:modulerr] Failed to instantiate module MovieRama.services due to: Error: [$injector:nomod] Module 'MovieRama.services' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

私のコードは次のとおりです。

var app = angular.module('MovieRama.services', []); 
app.factory('rtAPIservice', function($http) { 

    var rtAPI = {}; 

    rtAPI.getMovies = function() { 
     return $http({ 
      method: 'JSONP', 
       url: 'http://api.rottentomatoes.com/api/public/v1.0/lists/movies/in_theaters.json?  page_limit=10&page=1&country=us&apikey=XXXXX&callback=JSON_CALLBACK' 
     }); 
    } 

    return rtAPI; 
}); 

app.factory('rtAPIserviceall', function($http) { 
    var rtAPIall = {}; 

    rtAPIall.getMoviesall = function() { 
     return $http({ 
      method: 'JSONP', 
       url: 'http://api.rottentomatoes.com/api/public/v1.0/movies.json',{ 
      params: { 
       page_limit: '10', 
       page:'1', 
       q: $scope.search, 
       apikey: 'XXXX', 
       callback: 'JSON_CALLBACK' 
      } 
     } 
     }) 
    } 
return rtAPIall; 
});

HTML

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" /> 
<link rel="stylesheet" href="/node_modules/angular-material/angular-material.css"> 
<title>MovieRama</title> 
</head> 

<body ng-app="MovieRama"> 

     <table> 
      <thead> 
       <tr><th colspan="4">MovieRama</th></tr> 
      </thead> 


      <tbody ng-if= "search != null" ng-controller="moviesController"> 
      <ul ng-repeat="movie in moviesList"> 

       <td> 

        <img src={{movie.posters.thumbnail}} /> 

        <ul> {{movie.title}}</ul> 
        <ul> Release: {{movie.year}}- Runime: {{movie.runtime}}-Audience rating: {{movie. ratings.audience_score}}</ul> 
        <ul>{{movie.synopsis}}</ul> 

       </td> 
</tr> 

      </tbody> 

      <tbody ng-if="search == null"> 
      <ul ng-repeat="movie in moviesListall" ng-controller="moviesallController"> 

       <td> 
        <img src={{movie.posters.thumbnail}}/> 
        <ul> {{movie.title}}</ul> 
        <ul> Release: {{movie.year}} - Runtime: {{movie.runtime}} - Audience rating:  {{movie.ratings.audience_score}} </ul> 
        <ul> {{movie.synopsis}} </ul> 
       </td> 
      </tr> 
      </tbody> 

     </table> 
     <script src="bower_components/angular/angular.js"></script> 
     <script src="bower_components/angular-route/angular-route.js"></script> 
     <script src="js/app.js"></script> 
     <script src="js/services.js"></script> 
     <script src="js/controllers.js"></script> 
     <script src="/node_modules/angular/angular.js"></script> 
     <script src="/node_modules/angular-aria/angular-aria.js"></script> 
     <script src="/node_modules/angular-animate/angular-animate.js"></script> 
     <script src="/node_modules/angular-material/angular-material.js"></script> 

     </body> 
     </html>

アプリ。 js

angular.module('MovieRama', [ 
     'MovieRama.controllers', 
     'MovieRama.services' 
     ]);

1つの工場でうまく動作します。何が問題ですか？

出典

2016-04-14 Ελένη Μάρκου

このモジュールをHTMLでどのようにインスタンス化しますか？ –

@AlexChance私はあなたの説明を編集しました –

jsファイルをロードする順番を変更してみてください。 app.jsが最初に読み込まれ、読み込まれる前にMovieRama.servicesへの依存関係を注入しようとしています。または、問題があるかどうかをテストするために、すべてのモジュールコードを1つのファイルに入れてみてください。 –

MovieRama.servicesを、アプリケーションをブートするメインモジュールに追加します（おそらくファイル構造に基づいてindex.jsまたはapp.js）。

角度の2つのファイルがあるので、<script src="/node_modules/angular/angular.js"></script>への参照も削除してください。 jsファイルの前に角ファイルを一番上に移動します。

また、なぜ2つの方法が異なるサービスであるのですか。次の2つの方法でOneサービスを利用できます。

var app = angular.module('MovieRama.services', []); 
app.factory('rtAPIservice', function($http) { 

var rtAPI = {}; 

rtAPI.getMovies = function() { 
    return $http({ 
     method: 'JSONP', 
      url: 'http://api.rottentomatoes.com/api/public/v1.0/lists/movies/in_theaters.json?  page_limit=10&page=1&country=us&apikey=XXXXX&callback=JSON_CALLBACK' 
    }); 
} 
rtAPI.getMoviesall = function() { 
    return $http({ 
     method: 'JSONP', 
      url: 'http://api.rottentomatoes.com/api/public/v1.0/movies.json',{ 
     params: { 
      page_limit: '10', 
      page:'1', 
      q: $scope.search, 
      apikey: 'XXXX', 
      callback: 'JSON_CALLBACK' 
     } 
    } 
    }) 
} 
return rtAPI; 
});

出典

2016-04-14 18:44:17

私はすでにこれを行っていると思います。私はあなたの説明を編集しました –

答えを更新しました –

何も変更されていません。奇妙なことは、2番目のapp.factoryを追加すると問題が発生するということです。他のアイデア？ –

$インジェクタ：modulerrモジュール

答えて

関連する問題