如何将 node.js 服务器变量传递到我的 angular/html 视图中？

Posted 2023-03-07

【中文标题】如何将 node.js 服务器变量传递到我的 angular/html 视图中？

【英文标题】：How do I pass node.js server variables into my angular/html view?

【发布时间】：2014-10-04 14:00:17

【问题描述】：

我在启动服务器的 app.js 文件中有这条路由

app.get('/view/:item_id', function(req,res)
    var A = 5;
    res.render('view_item');

我的 view_item.html 中有这个：

<p>A</p>

我希望它显示变量值 - 5。如果我使用模板引擎，例如玉石，那将很容易。我可以将服务器代码的第三行更改为 res.render(A:A,'view_item');

但我使用 html 作为我的模板引擎。到目前为止，我的研究告诉我，使用带有 Angular 的模板引擎通常是一个坏主意，并且总有一种方法可以使用 Angular 的内置模板系统来做到这一点。那么我该怎么做呢？我是否以某种方式将其传递给 $scope 并包含类似

<script>
    $scope.A = A;
</script>

我还没有在任何地方看到这样做，所以我不认为这是要走的路。

【参考方案1】：

这是一个两步过程。

首先，您需要在 node 中使用像 express 这样的库（服务器库）来设置正确的路由（REST 服务）来响应您的请求：李>

服务器端

//app = express();
    app.get('/api/:paramID1/:paramID2',function(req, res)
        return res.json( A: 5 );
    );

在客户端，您需要一个 ajax 调用来调用服务，例如：

$http.get( "/api/1/abc").success(function( data ) 
  $scope.A= data; //from your sample;
  alert( "Load was performed. " + data );
);

请注意，使用 REST 时，可以根据需要调用不同类型的“方法”，例如 POST、DELETE、UPDATE 或刚刚在示例 GET 中提到的方法。

【讨论】：

好吧，澄清一下，在服务器端代码上，我会使用 res.json(//something using paramID1 and paramID2)//)，对吧？

:paramID1/:paramID2 可以删除，它们只是为了说明可以随请求一起接收多个参数，但从您的示例中它们不是必需的。从客户端param1和param2代表1和abc在请求/api/1/abc

@Dalorzo 如何在 Angular 6 中实现同样的功能？

您好，我试过了，它没有显示任何数据。还有什么我应该补充的吗

【参考方案2】：

如果您使用 Angular，您可能应该构建一个单页应用程序——这适用于大多数现代前端框架。对于 SPA，您从一个基本的 html 文件开始（可能是 index.html）。然后，您的框架处理其他所有内容的呈现。您的服务器也可能会发出模板，但它不会自己渲染任何东西。

app.get('/view/:item_id', function(req,res)

这不应该呈现任何内容或返回 HTML。相反，您应该返回前端将用于呈现的数据——最好是 JSON。

res.json(A: 5);

然后使用 Angular 你会做类似的事情

$http.get("/view/1").success(function (data) 
    ctrl.A = data.A;
);

你的 html/模板会有类似的东西

<div ng-controller="ctrl as ctrl">
    <div>ctrl.A</div>

一旦$http.get 完成，ctrl.A 就会被填充。

【讨论】：

看起来这个过程引入了一个额外的步骤，使用 $http.get 而不是仅仅使用模板引擎。这样慢吗？

@user3727514 不，因为无论如何你都必须提出/view/1 请求......只是$http 为你做这件事

好吧，这是有道理的。因此，如果我的页面非常简单 - 几乎就是我想要传入的一个变量，那么这样做还值得吗？或者我应该只使用模板引擎？

@user3727514 很难回答这个问题。您是想构建一个单页应用程序（一切都在前端），还是希望每次请求都重新加载一个页面？

它是一个两页应用程序。一个带有索引页面 - 显示数据库中的所有内容，一个视图页面 - 显示数据库中的特定项目。我已经在索引页面上使用了 angular，这绝对是要走的路。现在我想知道是否在单个项目视图页面上使用它——它几乎只需要一个 db 项目的属性作为变量。想知道是用玉还是角来做这个。