How do I pass node.js server variables into my angular/html view?

Question

I have this route in my app.js file that starts the server

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

and I have this in my view_item.html:

<p>{{A}}</p>

I want it to display the variable value - 5. If I were using a template engine such as jade it would be easy. I could change that third line of my server code to res.render({A:A},'view_item');

But I am using html as my template engine. My research so far has told me that using a template engine with angular is usually a bad idea, and there is always a way to do it using angular's built in template system. So how do I do this? Do I somehow pass it to the $scope and include like

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

I haven't seen this done anywhere so I don't think its the way to go.

Answer 1

This is a two step process.

1. First, you need to use a library(server library) like express in node to set the proper routings (REST Services) to respond to your Requests:

Server Side

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

2. On the client side, you need an ajax call to invoke the service like:

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

Please note that when using REST there are different type of "methods" that can be invoked depending on your needs, such as POST, DELETE, UPDATE or the one just mentioned in the example GET.

Answer 2

If you are using Angular you should probably be building a single page app -- this would apply for most of the modern front end frameworks. For SPAs you start out with a basic html file (probably index.html). Then, your framework handles the rendering of everything else. Your server may also emit templates, but it will never render anything itself.

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

This shouldn't be rendering anything or returning HTML. Instead, you should be returning data that the front end will use to render -- preferably as JSON.

res.json({A: 5});

Then with Angular you would do something like

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

Your html/template would have something like

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

Once $http.get completes, ctrl.A is populated.