Question

事情就是这样：到目前为止，我正在努力学习AngularJS并做一件非常简单的事情。

app.js

(function () {
'use strict';
angular.module('vApp', []);
})();

ListUsersController.js

(function () {
'use strict';

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

app.controller('Hello', ['$scope', function ($scope) {
    $scope.id = 'ID';
    $scope.content = 'some stuff';
}]);

}());

的hello.jsp

<!DOCTYPE html>

<html ng-app="vApp">
<head>
<title>Spring 3 MVC Series - Contact Manager</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script src="WEB-INF/angular/app.js"></script>
<script src="WEB-INF/angular/ListUsersController.js"></script>

</head>
<body >


<div ng-controller="Hello">
<h1>Supposed to be cool</h1>
<p>The ID is {{id}}</p>
<p>The content is {{content}}</p>
</div>

</body>
</html>

似乎我正在某处做一个完全愚蠢的错误，因为我在浏览器中得到了这个：

应该很酷

ID为{{id}}

内容为{{content}}

无论我尝试什么以及如何更改代码，都无效。我有什么想法我做错了吗？任何提示都将不胜感激。先感谢您。

修改由于最有可能的问题是脚本文件未找到异常导致我决定输入我的Web应用程序结构，因为这个问题没有任何意义：

-webapp
-WEB-INF
    -angular
        app.js
        ListUsersController.js
    -pages
        hello.jsp

Answer 1

我已经完全复制了你的HTML和JS代码以便在本地保存。然后我没有使用JSP，只需在浏览器中打开HTML文件，就可以了！结果很好：

Supposed to be cool

The ID is ID

The content is some stuff

我怀疑你没有正确地包含JS文件，即：

<script src="WEB-INF/angular/app.js"></script>
<script src="WEB-INF/angular/ListUsersController.js"></script>

请检查一下。

在将应用程序配置到服务器（例如Apache）之前，您的文件只是本地文件，并通过绝对或相对路径定位。但是对于Web服务器软件，您需要定义自己的URL映射规则。说：http://book.seaside.st/book/advanced/deployment/deployment-apache/serving-files

Answer 2

将代码放在自动执行的函数中是非常好的做法，除了你犯了一个小错误。

将last（）移到函数和其他大括号之外。

(function () {
'use strict';

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

app.controller('Hello', ['$scope', function ($scope) {
    $scope.id = 'ID';
    $scope.content = 'some stuff';
}]);

})();

否则永远不会调用该函数，并且您的代码对于浏览器而言并不“存在”。

Answer 3

从那里你得到了这种语法： - （function（）{ 'use strict';

var app= angular.module('vApp');
..
..
}());

只需删除（function（）{ '使用严格';最后分别括号。

Answer 4

问题是：依赖注入。你必须这样做。在你的app.js

    angular.module('vApp', ['vApp.controller']);

ListUsersController.js

angular.module('vApp.controller',[])
   .controller('Hello', ['$scope', function ($scope) {
    $scope.id = 'ID';
    $scope.content = 'some stuff';
}]);

AngularJS控制器无法正常工作

4 个答案: