2016-04-14 107 views
1

我是新来的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' 
     ]); 

它适用于一家工厂。问题是什么?

+0

你如何在你的html中实例化模块? –

+0

@AlexChance我编辑了你的描述 –

+0

只是一个猜测,但你可能想尝试改变你加载你的js文件的顺序。首先加载app.js,并在加载之前尝试在MovieRama.services上注入依赖项。或者尝试将所有模块代码放在一个文件中以测试是否是问题。 –

回答

0

将依赖关系MovieRama.services添加到引导应用程序的主模块(可能为index.jsapp.js,基于您的文件结构)。

同时删除对<script src="/node_modules/angular/angular.js"></script>的引用,因为您有两个角度文件。在您的js文件之前将角度文件移到顶部。

另外,为什么有两种方法作为不同的服务。你可以有两种方法的服务,如下所示:

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; 
}); 
+0

我想我已经做到了。我已为您编辑说明 –

+0

我已更新答案 –

+0

没有任何变化。奇怪的是,当我添加第二个app.factory时出现问题。任何其他想法? –

相关问题