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的{{1}}中将此控制器作为依赖项注入：

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'; }]);删除加载MainController.js的行。

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

3 个答案: