Question

我刚开始使用Angular，我对这个错误有点困惑。我不知道我做错了什么，但我的控制台显示了这个错误：

angular.js：38未捕捉错误：[$ injector：modulerr] http://errors.angularjs.org/1.5.8/ $ injector / modulerr？p0 = app＆amp; p1 =错误％3A％20％...（http％3A％2F％2Flocalhost％3A8080 ％2Flib％2Fangular％2Fangular.min.js％3A21％3A179）（...）

我的HTML：

<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
   <link rel="stylesheet" href="css/app.min.css">
   <script src="lib/angular/angular.min.js"></script>
   <script src="lib/angular-route/angular-route.min.js"></script>
   <script src="lib/angular-resource/angular-resource.min.js"></script>
   <script src="js/app.js"></script>
   <script src="js/controller.js"></script>
</head>
<body>
    test
</body>
</html>

和我的app.js：

(function() {
   'use strict';
    angular.module('app', [
        'ngRoute',
        'ngResource',
        'mainController'
    ])
   .config(['$routeProvider', function() {
       routeProvider.when("/", {templateUrl: 'www/index.html', controller:      'mainController'})
   }])

   .controller('mainController', function($scope){
      alert();
   })
 })();

出了什么问题？

Answer 1

您不必将控制器作为依赖项注入模块

更改，

angular.module('app', ['ngRoute','ngResource','mainController'])

要

angular.module('app', ['ngRoute','ngResource'])

<强> DEMO

Answer 2

mainController不是模块，而是app模块中的控制器。因此注入mainController在这里没有意义。从模块依赖项数组中删除mainController注入。

其他依赖项ngRoute和ngResources是您的模块所依赖的模块 - 例如，$routeProvider来自ngRoute模块，因此为了获取routeProvider，您需要将ngRoute模块注入依赖项。

Answer 3

首先，不要将控制器作为依赖项注入。请记住：您在创建模块后将其注册并将其添加到该模型中。因此，在创建模块时注入它是没有意义的。它还没有存在。有意义吗？

然后有些东西让你的生活变得更轻松：从你的控制器注册中分离你的app配置。有一个app.js例如做下面的代码。注意我将步骤分开了，我还创建了一个配置函数，然后我在app.config中调用它。在我们必须处理的JavaScript混乱中，这只是更具可读性。

(function() {
'use strict';

var app = angular.module('app', ['ngResource']);

var config = function(routeProvider){
    routeProvider.when("/", {templateUrl: 'www/index.html', controller:      'mainController'});
};

app.config(['$routerProvider'], config); 
}) 
})();

然后有一个mainController.js包含控制器代码和它的注册。当您开始添加更多控制器和服务等时，它将更具有前瞻性。另外，不要使用$ scope，使用＆＃39;这个＆＃39;相反，你可以使用1.5版本中的那个。只有当你需要使用$ scope时才会这样做，因为＆＃39;这个＆＃39;在角图中没有工作，只是抬头;）

(function ()
{    
'use strict';

var mainController = function ($scope,)
{
    var vm = this;

    vm.variable = "value";
};

angular.module('app').controller('mainController', ['', mainController]);
})();

不要错过代码片段的奇怪缩进，这个页面上的编辑器对我有点麻烦;）

运行我的应用程序时角度模块注入错误

3 个答案: