未捕获错误:模块'myApp'不可用!(AngularJS)

Val*_*or_ 8 html javascript angularjs angularjs-directive angularjs-controller

我正在研究角度教程,我在开始时遇到了问题.加载myApp模块会引发错误.如教程中所述,这应该是创建控制器的三种方法之一.

这是我正在研究的教程的打印屏幕: 在教程中创建控制器

当我刷新网页时,我在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.
Run Code Online (Sandbox Code Playgroud)

这是我的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>
Run Code Online (Sandbox Code Playgroud)

这是我的app.js文件

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

var MainController = function($scope){
    $scope.val = "Main controller variable value"
}
Run Code Online (Sandbox Code Playgroud)

那我的问题是什么?我无法弄清楚.

先感谢您

PSL*_*PSL 9

模块'myApp'不可用!您要么错误拼写了模块名称,要么忘记加载它.如果注册模块,请确保将依赖项指定为第二个参数.

您的原始问题是由于脚本标记无效.基本上你的脚本标签没有关闭,需要关闭它才能让浏览器下载app.js文件.脚本标签不是自动关闭的,因此它需要一个结束标记.

<script src="app.js">
Run Code Online (Sandbox Code Playgroud)

应该

<script src="app.js"></script>
Run Code Online (Sandbox Code Playgroud)

现在一旦你修好了,你就会遇到另一个错误.

[ng:areq] Argument'MainController'不是函数,未定义

由于您使用的是最新的角度版本,即任何> = 1.3.x都需要使用.controller构造手动注册控制器.在这里看到更多的细节.

注意 - 它有点令人困惑,因为屏幕截图显示您使用的是1.2.0(不一定需要显式的控制器注册),但在1.4.x中显示的问题是片段.

  • 好眼睛.. +1先生 (2认同)
  • 哦,伟大的! (2认同)

Pan*_*kar 5

您应该controller向角度模块注册a myApp

App.js

var myApp = angular.module('myApp', []);
myApp.controller('MainController', MainController );
var MainController = function($scope){
    $scope.val = "Main controller variable value"
}
Run Code Online (Sandbox Code Playgroud)

基本上,您的操作是正确的,但是该代码之后是AngularJS的较旧版本。声明控制器的方式不过是称为controller As函数,它需要enable allowGlobals()方法$controllerProvider。由于allowGlobals()通过添加以下代码禁用了Angular 1.3 + 方法,因此可以将其打开以使代码正常工作,但不建议这样做。

设定档

myApp.config(['$controllerProvider',
  function($controllerProvider) {
    $controllerProvider.allowGlobals();
  }
]);
Run Code Online (Sandbox Code Playgroud)

在这里引用相同的答案