をインスタンス化できませんでした私は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つの工場でうまく動作します。何が問題ですか?
このモジュールをHTMLでどのようにインスタンス化しますか? –
@AlexChance私はあなたの説明を編集しました –
jsファイルをロードする順番を変更してみてください。 app.jsが最初に読み込まれ、読み込まれる前にMovieRama.servicesへの依存関係を注入しようとしています。または、問題があるかどうかをテストするために、すべてのモジュールコードを1つのファイルに入れてみてください。 –