Javascript 角度-错误：$injector:moduler模块错误

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

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

---

当我只是使用控制器运行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

  （区分大小写！）

---

Angular让我绝望…

图像

似乎不是

mainCtrl

的一部分，很可能是问题所在。你知道你不必为每个组件制作模块，不是吗？我收到你控制器的应用程序未定义错误。然而，似乎解决了这个问题的方法是使用不同的脚本链接。我现在从angular网站上取走了它们，而不是cdn/google，它的工作状态很好。当我有机会的时候，我会用npm代替。

//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);
        });
}]);