NodeJS：GET返回后如何加载HTML页面；找不到Angular.js答案

【问题标题】：NodeJS: How to load HTML page after GET has returned; Angular.js not being foundNodeJS：GET返回后如何加载HTML页面；找不到Angular.js
【发布时间】：2016-12-11 06:54:19
【问题描述】：

我对 AngularJS 和 NodeJS 都很陌生。我试图让一个基本的应用程序在页面加载时运行，它将发出一个返回客户 JSON 结构的 GET 调用，然后 HTML 页面将使用 AngularJS 将该 JSON 结构显示到一个表中。

我可以在我的server.js 中加载我的 HTML：

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

我可以在我的server.js 中进行 GET 调用以在页面加载时检索我的 JSON 数据：

app.get('/', function(req, res) {
    fs.readFile('./testData.json', 'utf8', function(err, data) {
        res.send(data);
    });
});

我想将这两者结合起来，以便 GET 调用返回，然后 HTML 使用该数据。我该怎么做？

我还在 angular.js 的浏览器中收到 404 错误。我把路径放在我的index.html 中，就像我的所有其他 JS 文件一样。我在app.use 中有它在我的server.js 中。我的其他 JS 文件和我的 CSS 文件可以找到，但不是 angular.js。有谁知道为什么会这样？这是错误

angular.js not found error

这是我的完整代码：

Server.js：

var path = require('path');
var express = require('express');
var fs = require('fs');
var app = express();

// angular.js gets 404 in browser -- why?
app.use(express.static(path.join(__dirname, '../frontend/bower_components/angular')));
// These files load fine (SimpleController.js, main.css)
app.use(express.static(path.join(__dirname, '../frontend/app')));

// This will load the HTML page
app.get('/', function(req, res) {
    res.sendFile(path.join(__dirname + '/../frontend/app/partials/index.html'));
});

// This will return JSON data -- How to combine this with the above GET?
app.get('/', function (req, res) {
    fs.readFile('./testData.json', 'utf8', function(err, data) {
        if(err) {
            return console.log(err);
        }
        res.send(data);
    });
});

var server = app.listen(8081, function() {
    var port = server.address().port;                                                                                         

    console.log("Server listening on port ", port);
});

SimpleController.js：

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

app.controller('SimpleController', function ($scope, $http) {

    $http.get('/').then(function (response) {
        $scope.customers = response.data;
    });

});

index.html:

<!DOCTYPE html>
<html ng-app="app">
  <head>
     <title>CUSTOMERS</title>
     <link rel="stylesheet" type="text/css" href="../main.css">
  </head>
  <body>
     <h1> CUSTOMERS </h1>
     <div ng-controller="SimpleController">
        <form>
           <label>First Name:</label>
              <input type="text" /> <br />
           <label>Last Name:</label>
              <input type="text" /> <br />
           <label>Age:</label>
              <input type="text" /> <br />
           <label>Street:</label>
              <input type="text" /> <br />
           <label>City:</label>
              <input type="text" /> <br />
           <label>State:</label>
              <input type="text" /> <br />
           <label>Zip:</label>
              <input type="text" /> <br />
           <input type="submit" value="Add Customer" />
        </form>

        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        <table id="customers">
           <tr>
              <th>First Name</th>
              <th>Last Name</th>
              <th>Age</th>
              <th>Street</th>
              <th>City</th>
              <th>State</th>
              <th>Zip</th>
           </tr>
           <tr ng-repeat="cust in customers">
              <td> {{ cust.firstName }} </td>
               <td> {{ cust.lastName }} </td>
               <td> {{ cust.age }} </td>
               <td> {{ cust.address.street }} </td>
               <td> {{ cust.address.city }} </td>
               <td> {{ cust.address.state }} </td>
               <td> {{ cust.address.zip }} </td>
            </tr>
         </table>
      </div>
      <!-- angular.js gets 404 in browser -->
      <script src="../../bower_components/angular/angular.js"></script>
      <!-- this loads fine -->
      <script src="../SimpleController.js"></script>
   </body>
</html>

更新：所以不知何故，我的 index.html 找不到 angular.js 文件。我将 angular.js 文件从 /src/frontend/bower_components/angular/ 移动到 /src/frontend/app 以及我的其余 javascript 文件。我的 index.html 位于'/src/frontend/app/partials/。我按照 suzo 建议的方法执行了此操作，即创建一个 '/' 路由和 '/data' 路由，然后在我的控制器中调用 '/data'。

所以我的下一个问题是……为什么 index.html 不能在 /bower_components 目录中读取 angular.js，但它可以在 /app 目录中正常读取？

【问题讨论】：

看起来你有两条相同的路由'/'，将getData路由更改为'/data'或其他东西。

标签： javascript html angularjs node.js

【解决方案1】：

与其将这两者结合起来，不如将 getData api 分开，并在使用 Angular 获取 index.html 后呈现数据。现在要让它工作，您可以保持 index.html api 不变，并将 getData api 更改为 '/data' 或适当的东西。

您没有在 $http 请求中提及 api url，这导致了 404 NOT FOUND 错误。改成这个试试：

app.controller('SimpleController', function ($scope, $http) {

  $http.get('http://localhost:8081').then(function (response) {
     $scope.customers = response.data;
  });

});

并且，对于getData api，如果您定义的路由是'/data'，它将是

$http.get('http://localhost:8081/data')

最好将所有其余的 api 调用放在服务/工厂中，而不是将所有内容都放在控制器中。这是我们遵循的最佳做法之一。

【讨论】：

我这样做了。 HTML 页面在“/”处加载，我从“/data”获取 JSON 格式的客户列表……但是如何使用“/data”的响应在 HTML 页面上填充我的表格？我需要从我的 index.html 中拨打电话吗？此外，添加 url 并没有解决我的错误。我正在向问题添加错误屏幕截图。
我想通了；更新了问题。由于某种原因，在我所在的目录中找不到 Angular.js 文件。我将 angular.js 与 SimpleController.js 文件一起移到了我的 /app 目录中，并且它能够在那里读取它。我不知道为什么它不能读取另一个目录......无论如何，在这样做之后，按照你所说的制作'/data'我能够让它工作。
酷。很高兴它有帮助:)

【解决方案2】：

你可以试试这样的：

app.get('/', function (req, res) {
   customers =  fs.readFile('./testData.json', 'utf8', function(err, data) {
        if(err) {
            return console.log(err);
        }
        res.send(data);
    });
});

也许你需要使用 JSON.stringfy

【讨论】：

【解决方案3】：

为了结合两者，我相信您必须在发送之前将数据添加到html文件中。

如果您想动态添加 JSON，请考虑使用 AngularJS 而不是 NodeJS。

在 Angular 中创建您的路线：

const routes: Routes = [
    {path: '', component: MainComponent},
    {path: 'login', component: LoginComponent}
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})

export class AppRoutingModule {
}

如果您不知道什么是组件，我建议您阅读 AngularJS 教程。这是来自 Angular.io 的打字稿：https://angular.io/docs/ts/latest/tutorial/

然后，您可以使用诸如 *ngIf 之类的指令来获取数据并动态呈现数据（也在教程中进行了说明）。

。

【讨论】：