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'
    });
});

然后，在您的控制器中，您将注入所需的服务。您不必将自己的OWN服务和控制器添加到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（区分大小写！）

角度 - 错误：$ injector：modulerr模块错误

1 个答案: