Question

我对AngularJS和NodeJS都很陌生。我正在尝试运行一个基本的应用程序，在页面加载时将进行GET调用，返回客户的JSON结构，然后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的{{1}}中找到了它。我可以很好地找到我的其他JS文件和我的CSS文件，但不是angular.js。有谁知道为什么会这样？这是错误

angular.js not found error

这是我的完整代码：

Server.js：

server.js

SimpleController.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);
});

的index.html：

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

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

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

});

更新：所以不知何故，我的index.html找不到angular.js文件。我将angular.js文件从<!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>  <script src="../../bower_components/angular/angular.js"></script>  <script src="../SimpleController.js"></script> </body> </html>移动到/src/frontend/bower_components/angular/和其余的javascript文件。我的index.html位于“/src/frontend/app。我做了这个，suzo建议做一个'/'路由和'/ data'路由，然后在我的控制器中调用'/ data'。

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

Answer 1

您可以尝试以下内容：

public abstract class Log
{
    #region Properties
    public Guid Id { get; set; }
    [Required]
    public string ClientIp { get; set; }
    [Required]
    public string Application { get; set; }
    [Required]
    public string Host { get; set; }
    [Required]
    public string Path { get; set; }
    [Required]
    public string Method { get; set; }
    [Required]
    public string User { get; set; }
    [Required]
    public string Date { get; set; }
    #endregion
}

也许您需要使用JSON.stringfy

Answer 2

要组合这两者，我相信你必须在发送之前将数据添加到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等指令获取数据并动态呈现数据（也在教程中进行了解释）。

。

Answer 3

不要将这两者结合起来，最好将getData api保持分离，并在使用Angular获取index.html后呈现数据。现在，为了使其正常工作，您可以保持index.html api不变，并将getData api更改为＆＃39; / data＆＃39;或适当的东西。

你没有在$ 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，如果您定义的路由是＆＃39; / data＆＃39;，那么它将是

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

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

NodeJS：GET返回后如何加载HTML页面;没有找到Angular.js

3 个答案: