Angular - Error: $injector:modulerr模块错误

Angular - Error: $injector:modulerr Module Error

本文关键字：modulerr 模块 错误 injector Error Angular      更新时间：2023-09-26

我知道这个问题已经被问了很多次了，但是我一直找不到答案。

我发现了一个很好的入门教程，只是使用控制器和服务来运行api调用并加载一些数据到页面上。

我知道，但是我希望使用路由加载不同的api数据到不同的页面。

正因为如此，我知道有:

//app.js
var app = angular.module('app', ['ngRoute', 'mainCtrl', 'randomCtrl', 'imageService']);
app.config(function($routeProvider) {
    $routeProvider
    .when('/', {
        templateUrl : 'pages/home.html',
        controller  : 'mainController'
    });
});

我的控制器:

//mainCtrl.js
angular.module('mainCtrl', [])
.controller('mainController', function($scope, $http, Image) {
    // loading variable to show the spinning loading icon
    $scope.loading = true;
    Image.get()
        .success(function(data) {
            $scope.images = data;
            $scope.loading = false;
            console.log(data);
        });
});

在我的文件头，我有路由链接:

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js"></script> <!-- load angular -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular-route.min.js"></script>

我的全部错误是:

Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.8/$injector/modulerr?p0=app&p1=Error%3A%20%…ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.8%2Fangular.min.js%3A29%3A115)

当我只是使用控制器运行API调用，然后重复结果时，一切都工作得很好。如果有兴趣的话可以使用Laravel 5

您的问题是您试图将服务注入控制器的方式。你做错了。而且，我不明白为什么要为每个控制器/服务创建一个模块。

试着把你的代码改成这样，看看它是否有效:

//app.js
// NO need to add other modules like your OWN controllers and services
var app = angular.module('app', ['ngRoute']);
app.config(function($routeProvider) {
    $routeProvider
    .when('/', {
        templateUrl : 'pages/home.html',
        controller  : 'mainController'
    });
});

然后，在控制器中注入所需的服务。你不需要把自己的服务和控制器添加到angular.module。所以你的控制器可以像这样:

//mainCtrl.js
// Note that I'm using the "app" module instead of creating a new module
app.controller('mainController', ['$scope', '$http', 'imageService', function($scope, $http, Image) {
    // loading variable to show the spinning loading icon
    $scope.loading = true;
    Image.get()
        .success(function(data) {
            $scope.images = data;
            $scope.loading = false;
            console.log(data);
        });
}]);

我不知道你的imageService文件看起来像什么。但我想这应该能奏效。

注意事项:

    确保你已经在你的HTML中包含了你的imageService.js
  • 确保服务确实被称为imageService(区分大小写!)
相关文章：