角误差：$injector:modulerr模块误差

Question

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

我发现了一个很好的入门教程，它只是使用控制器和服务来运行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。

Answer 1

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

尝试将您的代码更改为此，并查看它是否有效：

//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文件是什么样子。但我想这应该能起作用。

有几件事要注意：

• 确保您已将imageService.js包含在HTML中。
• 确保服务真正被称为imageService (区分大小写！)