AngularJS Node.JS 应用程序的代码未在本地主机上显示

Question

我构建了一个 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 文本编辑器浏览器预览中测试时，Index.html 页面仅作为独立的隔离 HTML 页面（没有 CSS）正确呈现 Angular 代码当使用 HTTP-Server 模块作为独立的 HTML 文件进行测试时。它正确显示数字“3”。所以我知道我的 angular 代码本身不是这里的问题。在我的本地主机中，HTML 页面不显示数字“3”，甚至不显示“{{ 1 + 2 }}”。它只是简单地写着："AngularJS code:" 以及 HTML 和 CSS 等的其余部分

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

我已经坚持这个问题太多天了，失眠了，并因此放弃了所有其他活动，所以如果你们中的任何人都可以告诉我发生了什么以及如何解决这个问题，万分感谢！！！ :)

Answer 1

将 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 的建议仅从您的系统附加 angular js。将 angular js 文件保存在同一文件夹中。

Answer 2

要使其正常工作，您需要这样的目录结构：

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

Answer 3

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

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

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

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

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

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

的文件夹中

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

我要补充一点，这对我来说绝对很奇怪，因为 JQuery 可以通过 CDN 导入它的源文件而不进行上述代码更改，但是 Angular 不能通过本地下载的Angular 源文件或通过 Angular CDN！如果我弄清楚为什么会这样，我一定会更新这个答案。如果有哪位Angular、Node、Express高手知道为什么会这样，还请赐教！

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

AngularJS Node.JS 应用程序的代码未在本地主机上显示

AngularJS code not showing on Localhost for Node.JS app

node.js

express

angularjs

mean-stack