ng-controller 即使被正确调用也无法工作

Question

我测试了最基本的angularjs。我使用 nodejs，angularjs 和 html。

这是我的文件。 https://github.com/internial/test。 node_modules 没有发布 b/c 它太大了。

在 localhost:8080 中。这是我得到的输出。

{{1 + 64}}
{{main.msg}}

{{this.msg}}

{{msg}}

{{mainController.msg}}

Angular 就是行不通。但是，当我没有 ng-controller 和 ng-app（初始化为空）时它可以工作。但是我不能打电话给控制器。我只会做基本的 {{1 + 64 }}.

谁能告诉我我做错了什么？

Answer 1

您还需要将控制器分配给正确的模块。

所以你的 index.html 说：

ng-app="firstController"

事实上，您的模块就是这样命名的。

var app = angular.module("firstController", []);

（旁注：我可能会将其重命名为 firstApp，因为它是整个应用程序的名称）。

现在，如评论中所述，将 mailController 重命名为 mainController，它应该可以工作。看例子：

https://jsbin.com/caqohasoce/edit?html,js,output

编辑：刚刚看到您正在使用快递服务。而你唯一暴露的路线只给出 index.html - 意味着 ngapp.js 永远不会到达浏览器：

app.get('/', function( req, res) {
  res.sendFile(path.join(__dirname + '/index.html'));
});

这里有两种方法可以解决这个问题。您可以使用 express.static 而不是直接提供文件：

app.use(express.static());

或者，您在这里甚至根本不需要快递。您可以使用像 apache 或 nginx 这样的实际 HTTP 服务器来提供这些文件，或者您可以使用类似 http-server node module:

npm install http-server
node_modules/.bin/http-server .

它将提供您的文件而不是快递。

这里还有其他事情要做，例如将其全部移动到 /public 目录或类似目录中，以将服务器模块与客户端分开，但这些与您的问题无关。

Answer 2

我建议您执行以下操作..

在您的 ngapp.js 文件中将其重写为：

var app = angular.module("firstController", []);
        app.controller("mainController", function($scope) {
            $scope.msg = "Hello from NG controller";
        });

在您的标记中重写为：

<!DOCTYPE html>
<html ng-app="firstController">
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.8/angular-route.min.js"></script>
    <script src="ngapp.js"></script>
</head>

<body ng-controller="mainController">
{{1 + 64}}
<h3>{{msg}}</h3>
</body>
</html>

提示：将其重命名为 ng-app="firstApp" 而不是 ng-app="firstController"，因为它是一个应用程序。

检查拼写 (app.controller("mailController")，在您的标记中有 ng-controller(mainController))。

ng-controller 即使被正确调用也无法工作

ng-controller doesn't work even through it is called correctly

javascript

angularjs

node.js

controller

client-side