如何使用 Node 和 Angular 在服务器和客户端之间传输数据？答案

【问题标题】：How to transfer data between server and client using Node and Angular?如何使用 Node 和 Angular 在服务器和客户端之间传输数据？
【发布时间】：2016-09-22 03:56:39
【问题描述】：

我有一个使用 Node.js、Express、Firebase 3.4.0 和 Angular.js 构建的应用程序。在server.js 的服务器端，我初始化应用程序，然后获取对users 的数据库引用：

var express = require('express');
var bodyParser = require('body-parser');
var path = require('path');
var firebase = require("firebase");
var app = express();

app.use(bodyParser.urlencoded({extended: false}));
app.use(bodyParser.json());
app.use(express.static(path.resolve(__dirname, 'views')));

// Firebase setup; this is where it messes up...
firebase.initializeApp({
    apiKey: "apiKey",
    authDomain: "projectId.firebaseapp.com",
    databaseURL: "https://databaseName.firebaseio.com",
    storageBucket: "bucket.appspot.com"
});
var db = firebase.database().ref();
var users = db.child('users');

app.listen(process.env.PORT, process.env.IP);

app.get('/', function (req, res) {
    res.sendfile('/views/index.html');
    // missing a statement to pass users to the view
});

现在，这个users 引用需要传递给index.html，最好是作为一个数组，以便在视图中操作和呈现数据。

考虑到我将使用 Angular，是否有可能做到这一点？
我知道模板语言会很方便，但是由于服务器端和客户端都使用相同的语言，难道没有一种简单而优雅的方式让它们只通信数据？
解决此类问题的标准方法是什么？ 与数据库的连接必须在服务器端打开，所以应该有一种方法，实际上有很多方法可以转移将该数据发送到客户端以进行进一步操作/分解

谢谢！

【问题讨论】：

标签： angularjs node.js firebase firebase-realtime-database

【解决方案1】：

最初，index.html 没有任何业务数据交付，只是在 DOM 准备好时在客户端上实例化您的 AngularJS 应用。

然后是专门的 Angular service 用于处理用户触发器。此服务通过使用$http GET 请求向服务器请求 JSON 负载。

在服务器端，您使用新路由处理此请求：

app.get('/users', function (res, req) {
   // send the users as JSON
})

当 Angular 收到一个有效的响应时，它就会拥有用户，并且可以选择在 controller 中将它们呈现为 HTML

这种往返似乎很浪费，但它具有自主性的优势，因此您可以在应用程序的生命周期内多次重复使用此对话框。

如果您希望在 / 路由上预填充用户。您需要使用服务器端模板引擎，这样您就可以在您的 index.html 中注入一个 <script></script>，其中包含具有客户端应用程序初始状态的某种全局变量：

<script>window.__INITIAL_STATE__ = { users: … };</script>

这个命名是任意的，它只是你选择的一个约定，所以 Angular 会知道在它启动时首先检查这个。

【讨论】：