AngularJS 代码未在 Node.JS 应用程序的 Localhost 上显示答案

【问题标题】：AngularJS code not showing on Localhost for Node.JS appAngularJS 代码未在 Node.JS 应用程序的 Localhost 上显示
【发布时间】：2016-04-17 21:56:38
【问题描述】：

我已经构建了一个 Node.JS 应用程序（这意味着我在主 JS 文件中编写了自己的 HTTP 服务器，它应该与应用程序的其余部分一起工作）。 HTML 和 CSS 在 localhost 中呈现应有的效果。甚至 JQuery 也可以工作（使用通过 CDN 导入的源文件）。但是，我尝试在 Index.html 页面中添加非常基本的 AngularJS，并且 AngularJS 拒绝在我的本地主机中显示（任何地方）。它应该显示数字“3”，但没有。

这是我的 Index.html 页面，带有 Angular 代码：

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>{{title}}</title>
    <link rel="stylesheet" href="/css/home.css">
    <script src="/node_modules/angular/angular.js"></script>
    <script src="/node_modules/angular-route/angular-route.js"></script>
    </head>
    <body>
    <body ng-app>
    <p>AngularJS code: {{ 1 + 2 }}</p>
    </body>
    <div class="hm-container">
    <h1 class="hm-title">Some text</h1>
    </div>
    </body>
    </html>

chrome 中的控制台日志消息说：

    "Failed to load resource: the server responded with a status of 404 (Not   
    Found) http://localhost:3000/node_modules/angular/angular.js"

在我的 Brackets 文本编辑器浏览器预览中进行测试以及使用 HTTP-Server 模块作为独立 HTML 文件进行测试时，Index.html 页面仅将 Angular 代码正确呈现为独立的独立 HTML 页面（没有 CSS）。它正确显示数字“3”。所以我知道我的角度代码本身不是这里的问题。在我的本地主机中，HTML 页面没有显示数字“3”，甚至没有显示“{{ 1 + 2 }}”。它只是写着：“AngularJS 代码：”以及其余的 HTML 和 CSS 等。

即使通过 CDN 导入 AngularJS 源文件，或者从 Angular 的站点而不是从 NPM 下载 AngularJS 源文件，也没有任何区别。根据您的一些建议，我也使用了目录结构，但没有运气。所以我知道问题不是 Angular 源文件的文件路径。

我已经被困在这个问题上太多天了，失眠了，并且因此放弃了所有其他活动，所以如果你们中的任何人都可以就发生的事情以及如何解决这个问题给我您的意见，万分感激！！！ :)

【问题讨论】：

看起来您正在将 Web 根目录与项目根目录混为一谈。 Angular 的路径需要相对于 index.html 的位置。将 index.html 放在与 node_modules 目录相同的目录中，它应该可以工作。
感谢您的意见 Jason，我已听从您的建议，但不幸的是，这并不能解决问题。同样，它仅在作为独立的 HTML 文件运行时才有效。

标签： angularjs node.js express mean-stack

【解决方案1】：

好的，这就是我解决问题的方法。正如我最初怀疑的那样，这是一个服务器端问题。在主要的 Node.JS 文件（通常命名为 server.js 或 app.js）中，需要以下内容：

您很可能已经拥有这部分...

    var express = require('express'),
        app = express();

然后在上面的代码块之后立即跳过几行并添加...

    app.use(express.static(__dirname + '/views'));

显然，这就是 Express 知道在哪里提供 JS 文件的方式。 “views”文件夹是我的 HTML 页面所在的位置。您可以将它们放在名为“public”的文件夹中。

以下链接的解决方案帮助我解决了这个问题：AngularJS Code not working with NodeJS

我要补充一点，这对我来说绝对很奇怪，因为 JQuery 通过 CDN 导入其源文件而无需更改上述代码，但 Angular 不能通过本地下载的 Angular 源文件或通过 Angular CDN 工作！如果我弄清楚为什么会这样，我一定会更新这个答案。如果你们中的任何 Angular、Node、Express 专家知道为什么会这样，请赐教！

希望这可以帮助遇到类似问题的人。非常感谢你们两个试图帮助我解决这个奇怪的问题。非常感谢您的时间和投入！

【讨论】：

嗯，你知道... cdn url 是外部的，不在你的服务器上。那么你不需要改变你的服务器来引用它有什么奇怪的呢？
啊！伙计，您从来没有发布过您的服务器代码，但是如果您遵循每个人的建议，问题就不会再出现了。但最后我很高兴你帮助了自己。祝未来好运。继续编码。
@KevinB 你会想，但这很奇怪，因为即使使用 Angular CDN（它是外部的）它也不起作用，直到我引用了我在服务器上所做的事情。
@GandalftheWhite 尽管如此，我仍然非常感谢您的帮助！

【解决方案2】：

要做到这一点，您需要这样的目录结构：

|--app
|  |--index.html
|  |--node_modules
|  |  |--angular
|  |  |  |--angular.js
|  |  |--angular-route
|  |  |  |--angular-route.js
|  |--css
|  |--home.css

【讨论】：

如您所指出的那样尝试更改目录结构，但不幸的是没有区别。这是因为无论我将 angular 文件放在哪里（我什至使用了从 angular 站点下载的新 angular 源文件），HTML 文件都在正确地读取 angularJS 文件，但它似乎只有在它似乎命中节点服务器时， angularJS 不会渲染。
HTML 文件根本不读取 Angular 文件。它必须直接提供给浏览器。所有的部分都是由浏览器组装的，而不是服务器。来自浏览器的错误表明该文件不在 index.html 中给出的位置。
我同意你所说的。我什至尝试过不同的浏览器，甚至尝试使用 HTTP-Server（从 NPM 下载）为我的应用程序提供服务，但没有成功。
问题不在于浏览器。这是该文件不是浏览器正在查找的位置。 index.html 只有一个文件位置。浏览器尝试加载该文件，而您的服务器却说该文件不存在。您需要将该文件放在浏览器正在查找的位置。
如果是这种情况，当我使用 CDN 而不是实际的本地源文件时，为什么 Angular 代码不显示？

【解决方案3】：

将 Angular JS 附加到您的索引显然存在问题。您已经说过您甚至尝试通过 CDN 进行附加。

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="">

<h1> {{1+2}} </h1> 

</div>

</body>
</html>

这行得通，我已经检查过了。尝试将您的东西集成到此代码中。并按照 Jason 的建议仅从您的系统附加角度 js。将 Angular js 文件保存在同一文件夹中。

【讨论】：

感谢您的意见 Gandalf，我已听从您的建议，但不幸的是，这并不能解决问题。同样，它仅在作为独立的 HTML 文件运行时才有效（无论角度源文件在哪里或目录结构何时更改）。我相信问题似乎来自服务器端，因为 Chrome 日志控制台会抛出 404 未找到 Angular 的资源，即使在隔离和渲染时，完全相同的 html 文件可以正确读取 Angular 完全相同的源文件正确。被难住了！
服务器端？在控制台上，您会看到某个文件的 404，这仅表示未访问特定文件。您是否使用了我上面给出的 HTML，即使这样也不起作用？
我不认为我们与你的后端有任何关系，因为文件没有被提取。
我用你的代码替换了我的代码，当在我的本地主机上运行时，它返回了一个空白的 HTML 页面。然而这一次，由于一些非常奇怪的原因，它在控制台日志中根本没有返回任何错误。不过，您的 HTML 肯定会被获取。只是不是 AngularJS，因此是一个空白的空白页面。
这需要一个 https 才能工作。这是这个运行的 ajsfiddle：jsfiddle.net/jkennaly/o5hm0xha