我是新来的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'
]);
它适用于一家工厂。问题是什么?
你如何在你的html中实例化模块? –
@AlexChance我编辑了你的描述 –
只是一个猜测,但你可能想尝试改变你加载你的js文件的顺序。首先加载app.js,并在加载之前尝试在MovieRama.services上注入依赖项。或者尝试将所有模块代码放在一个文件中以测试是否是问题。 –