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

Question

我在启动服务器的 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>

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

Answer 1

这是一个两步过程。

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

服务器端

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

1. 在客户端，您需要一个 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 中提到的方法。

Answer 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 就会被填充。