javascript 未捕获的错误：模块“myApp”不可用！(AngularJS)
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33353728/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Uncaught Error: Module 'myApp' is not available! (AngularJS)
提问by Valor_
I'm working on angular tutorial and i'm having a problem on beginning. Loading myApp module throws error. As explained in tutorial, this should be one of three ways to create controller.
Here is print screen from tutorial i'm working on:
我正在编写角度教程，但在开始时遇到了问题。加载 myApp 模块会引发错误。如教程中所述，这应该是创建控制器的三种方法之一。
这是我正在处理的教程的打印屏幕：
When i refresh web page i get this error in Chrome console:
当我刷新网页时，我在 Chrome 控制台中收到此错误：
Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to:
Error: [$injector:nomod] Module 'myApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
This is my HTML file
这是我的 HTML 文件
<html ng-app="myApp">
<head>
</head>
<body>
<h1>Hello world!</h1>
<div ng-controller="MainController">
{{ 2+2 }}
<br>
{{ val }}
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<script src="app.js">
</body>
</html>
This is my app.js file
这是我的 app.js 文件
var myApp = angular.module('myApp', []);
var MainController = function($scope){
$scope.val = "Main controller variable value"
}
So what is my problem? I can't figure it out.
那么我的问题是什么？我想不通。
Thank you in advance
先感谢您
回答by PSL
Module 'myApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
模块“myApp”不可用！您拼错了模块名称或忘记加载它。如果注册模块，请确保将依赖项指定为第二个参数。
Your original issue is due to the invalid script tag. Basically your script tag is not closed it needs to be closed in order for the browser to download the app.js file. Script tags are not self closing so it needs a closing tag.
您的原始问题是由于无效的脚本标签造成的。基本上你的脚本标签没有关闭它需要关闭以便浏览器下载 app.js 文件。脚本标签不是自闭合的，所以它需要一个闭合标签。
<script src="app.js">
should be
应该
<script src="app.js"></script>
Now once you fix that you will get into another error.
现在一旦你解决了这个问题，你就会陷入另一个错误。
[ng:areq] Argument 'MainController' is not a function, got undefined
[ng:areq] 参数“MainController”不是函数，未定义
Since you are using the latest angular version, i.e anything >= 1.3.x needs the controller to be registered manually using the .controllerconstruct. See here for more details.
由于您使用的是最新的 angular 版本，即任何 >= 1.3.x 都需要使用.controller构造手动注册控制器。请参阅此处了解更多详情。
Note - it is a bit confusing because the screenshot shows you using 1.2.0 (which does not necessarily needs explicit controller registration) but snippet in the question shown 1.4.x.
注意 - 这有点令人困惑，因为屏幕截图显示您使用的是 1.2.0（不一定需要显式控制器注册），而是显示 1.4.x 的问题中的片段。
回答by Pankaj Parkar
You should register a controllerto the angular module myApp.
您应该将 a 注册controller到 angular 模块myApp。
App.js
应用程序.js
var myApp = angular.module('myApp', []);
myApp.controller('MainController', MainController );
var MainController = function($scope){
$scope.val = "Main controller variable value"
}
Basically what you were doing is correct but that code has been followed by the older version of AngularJS, The way you declared your controller is nothing but known as controller As function, which needs enable allowGlobals()method of $controllerProvider. Since Angular 1.3 + allowGlobals()method is disabled by adding below code, you could turn it on, to make your code working but it is not recommended way to do this.
基本上你正在做的是正确的，但该代码一直跟着老版本AngularJS的，这就是你宣布你的控制器也不过是被称为控制器功能，需要启用allowGlobals()的方法$controllerProvider。由于allowGlobals()通过添加以下代码禁用了Angular 1.3 +方法，您可以将其打开，以使您的代码正常工作，但不推荐这样做。
Config
配置
myApp.config(['$controllerProvider',
function($controllerProvider) {
$controllerProvider.allowGlobals();
}
]);
Refer same SO Answerhere
在此处参考相同的SO 答案
回答by 9ers Rule
Try this:
试试这个：
myApp.controller ("MainController",[$scope, function ($scope){
$scope.val = "Main controller variable value"
}]);
The ng-controllerdirective looks for the MainController in your MyApp module.
该ng-controller指令在您的 MyApp 模块中查找 MainController。
