如何将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.如果我使用的是模板引擎，例如jade，那将很容易。我可以将服务器代码的第三行更改为res.render({A:A},'view_item');

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

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

我没有在任何地方看到过这种情况，所以我认为没办法。

Answer 1

这是一个两步过程。

1. 首先，您需要使用节点中的 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时，有不同类型的＆＃34;方法＆＃34;可以根据您的需要调用，例如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。