AngularJS控制器不能完成它的工作

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

应用.js

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

列表用户控制器.js

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

你好.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}}
内容
是{{内容}}

无论我尝试什么以及如何更改代码，都不起作用。知道我做错了什么吗？任何提示将不胜感激。提前谢谢你。

编辑由于问题很可能是由找不到脚本文件异常引起的，因此我决定输入我的 Web 应用程序结构，因为这个问题没有任何意义：

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

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

将最后一个（）移到函数和其他大括号之外。

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

否则，永远不会调用该函数，并且您的代码对于浏览器来说"不存在"。

我已经完全复制了您的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

你

从哪里得到该语法： - （函数（） { "使用严格";

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

只需删除（函数（） { "使用严格";和最后分别是大括号。

问题是：依赖注入。你必须这样。在你的应用中.js

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

列表用户控制器.js

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

相关内容

最新更新

热门标签：