设置角度JS奇怪的错误angularjs：12416

Question

我正在离线学习代码学院angularjs的初始设置教程。 原因是我可以将其用作自己的应用程序指南。 我有3个文件MainController.js，app.js和index.html。

app.js

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

MainController.js

app.controller('MainController', ['$scope', function($scope) { 
  $scope.title = 'Top Sellers in Books'; 
}]);

index.html

<!doctype html>
<html ng-app>
  <head>
    <title>My App</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>

  </head>
  <body ng-app="myApp">



<div class="main" ng-controller="MainController">
    {{ title }}

</div>

<!-- Modules -->
<script src="js/app.js"></script>

<!-- Controllers -->

<script src="js/controllers/MainController.js"></script>

  </body>
</html>

在控制台中，我收到此错误，并且无法打印$ scope.title

我似乎无法弄清楚为什么会产生此错误

Answer 1

问题出在您的html代码上。 您已初始化ng-app两次，一次在<html> ，一次在<body>标签中。 删除<html>标记中的一个。 您的html代码应如下所示，

<!doctype html>
<html> <!-- Remove `ng-app` here -->
    <head>
        <title>My App</title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"> </script>

    </head>
    <body ng-app="myApp">

        <div class="main" ng-controller="MainController">
            {{ title }}
        </div>

        <!-- Modules -->
        <script src="js/app.js"></script>

        <!-- Controllers -->
        <script src="js/controllers/MainController.js"></script>

    </body>
</html>

Answer 2

我相信在MainController.js中无法了解您的应用程序。

您可以通过将其添加到MainController.js文件的顶部来完成此操作

var app = angular.module('myApp');

注意：这与app.js内容非常相似，但有所不同。

 // This is the app initialisation, because it includes an array of dependencies
 // as the second argument
 var app = angular.module('myApp', [])


 // This is a way to get your angular app from another file
 var app = angular.module('myApp')

Answer 3

您的代码中有两个问题：

您的HTML包含两个ng-app指令，一个位于<html> ，另一个位于<body>标签中。 您只需要一个ng-app指令。 因此，我建议您删除<body>标记中的一个并更改<html ng-app="myApp"> 。
您的MainController.js位于单独的文件（模块）中，但是您没有定义模块对象，现在希望该模块中具有app变量。 但这将无法加载，因为该模块中未定义app 。

您可以通过在MainController.js定义模块对象来解决第二个问题：

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

Controllers.controller('MainController', ['$scope', function($scope) {
  $scope.title = 'Top Sellers in Books';
}]);

然后，您可以注入该控制器为您的依赖myApp在app.js ：

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

或者，您可以将MainController模块的定义从MainController.js移到app.js并按其当前代码中的方式使用它。 像这样：

var app = angular.module('myApp', []);
app.controller('MainController', ['$scope', function($scope) {
  $scope.title = 'Top Sellers in Books';
}]);

然后从index.html删除加载MainController.js的行。

设置角度JS奇怪的错误angularjs：12416

问题描述

3 个解决方案

解决方案1
3 已采纳 2016-06-04 03:39:58

解决方案2
1 2016-06-04 03:23:33

解决方案3
0 2016-06-04 03:57:01

设置角度JS奇怪的错误angularjs：12416

问题描述

3 个解决方案

解决方案1 3 已采纳 2016-06-04 03:39:58

解决方案2 1 2016-06-04 03:23:33

解决方案3 0 2016-06-04 03:57:01

解决方案1
3 已采纳 2016-06-04 03:39:58

解决方案2
1 2016-06-04 03:23:33

解决方案3
0 2016-06-04 03:57:01