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

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

javascript angularjs

Javascript 运行我的应用程序时出现角度模块注入错误,javascript,angularjs,Javascript,Angularjs,我刚从Angular开始，我对这个错误有点困惑。我不知道我到底做错了什么，但我的控制台显示了以下错误： angular.js:38未捕获错误：[$injector:modulerr]$injector/modulerr？p0=app&p1=Error%3A%20%…（http%3A%2F%2localhost%3A8080%2Flib%2fagular%2fagular.min.js%3A21%3A179）（…）我的html： <!DOCTYPE html> <html l

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

angular.js:38未捕获错误：[$injector:modulerr]$injector/modulerr？p0=app&p1=Error%3A%20%…（http%3A%2F%2localhost%3A8080%2Flib%2fagular%2fagular.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>

怎么了？

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

变,

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

到

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

变,

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

到

主控制器不是一个模块，而是

应用程序

模块内的控制器。所以在这里注入主控制器是没有意义的。从模块依赖项阵列中删除

mainController

注入

其他依赖项，

ngRoute

和

ngResources

是您的模块所依赖的模块-例如，

$routeProvider

来自ngRoute模块，因此为了获取routeProvider，您需要将ngRoute模块作为依赖项注入。

主控制器不是模块，而是

应用程序

模块内的控制器。所以在这里注入主控制器是没有意义的。从模块依赖项阵列中删除

mainController

注入

其他依赖项，

ngRoute

和

ngResources

是您的模块所依赖的模块-例如，

$routeProvider

来自ngRoute模块，因此为了获得routeProvider，您需要将ngRoute模块作为依赖项注入。

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

然后是一些让你的生活更轻松的东西：把你的应用程序配置和控制器注册分开。例如，让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，而是使用'this'，我认为您可以从1.5版使用它。唯一需要使用$scope的地方，因为“this”在角度图表中不起作用，只是平视；）

顺便说一句，不要介意代码片段的奇怪缩进，这个页面上的编辑器有点搞乱了我；）

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

顺便说一句，不要介意代码片段的奇怪缩进，这个页面上的编辑器有点搞乱了我；）

controller.js文件中有什么？controller.js文件中有什么？@vbotio检查附件中的演示answer@vbotio检查答案中附带的演示

(function ()
{    
'use strict';

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

    vm.variable = "value";
};

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