如何将json文件从节点发送到angularjs

Question

我想要做的是将我网站的所有静态文件保存在我想以角度读取的 json 文件中，我正在考虑两种方法：

1. 直接从AngularJS调用一个json文件
2. 将 json 文件从节点发送到 AngularJS

我不知道该怎么做，我已经尝试过第二种方法（没有运气）：

Nodejs 代码：

app.get( '/content', function ( require, response ) {
    response.setHeader('Content-Type', 'application/json');
    response.json( readJSONFile( './client/content.json', function ( err, json ) {
            if ( err ) {
                throw err;
            }
            console.log( json );
        } )
    )
} );

function readJSONFile( filename, callback ) {
    require( "fs" ).readFile( filename, function ( err, data ) {
        if ( err ) {
            callback( err );
            return;
        }
        try {
            callback( null, JSON.parse( data ) );
        } catch ( exception ) {
            callback( exception );
        }
    } );
}

当我访问localhost:3000/content 并在浏览器上检查网络时，文件已发送，但在预览选项卡中看不到数据，不确定我做错了什么......

另外，我如何在 AngularJS 中创建服务以从服务器获取这些数据？

Answer 1

因此，您的问题可以分解为 2 个（相当）独立的问题。让我们一个一个来：

1。如何从 Node.js 应用程序提供 json 文件

您的代码不起作用的原因是您以“错误的顺序”执行它。您的readJSONFile 函数是一个asynchronous 函数，其中json 文件的内容仅在一段时间后 可用，此时Node 的readFile 函数的回调块被调用。在这里，您尝试使用readJSONFile 的立即返回值 作为response.json 的参数，这意味着undefined。这就是为什么您在预览选项卡中看不到任何数据的原因。

解决办法：

一个。为简单起见，您可以改用readFileSync：

app.get( '/content', function ( request, response ) {
    response.json( require('fs').readFileSync('./client/content.json', 'utf8') );
}

b.或者按照 Node.js 的异步签名（也是一种更好的做法）来生活，您可以这样做：

app.get( '/content', function ( request, response ) {
    readJSONFile( './client/content.json', function ( err, json ) {
        if ( err ) {
            throw err;
        }
        return response.json( json );
    } );
} );

我建议您在 Google 上搜索 readFile 和 readFileSync，以便对这些原生 Node.js API 有更深入的了解。无论哪种方式，这两种方法都应该在控制台预览选项卡中为您提供一些数据。现在剩下的就是下一个问题了：

2。如何从 AngularJS 向 HTTP 端点发出请求

说实话，这是一个相当“大问题”，不是因为它很难或太复杂无法解释，而是因为有很多不同的方法可以做到这一点。快速的答案是告诉你使用 Angular 的原生 $http 服务，或 ngResource，或多功能 Restangular；虽然我可以在这篇文章中继续讨论这些内容，但我认为 StackOverflow 上关于这个主题的答案要好得多，例如 this one。

再次，我个人建议您对上述 3 个关键字进行更多研究。如果事后看起来仍然很模糊，您可能总是会回到这里并提出更详细的问题，例如：“我如何使用 <NAME> 从 AngularJS 向服务器发出 HTTP 请求”，<NAME> 是 $http、ngResource 或 Restangular，我（或任何其他活跃用户）将非常乐意回答！