12

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.

user3727514
  • 273
  • 3
  • 6
  • 14

2 Answers2

11

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 });
    });

  1. 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.

Community
  • 1
  • 1
Dalorzo
  • 19,834
  • 7
  • 55
  • 102
  • ok so to clarify, on the server side code, I would use something like res.json(//something using paramID1 and paramID2)//), right? – user3727514 Aug 11 '14 at 16:58
  • `:paramID1/:paramID2` can be removed they are just to explain that multiple parameters can be received along with the request but from your sample they are not required. From the client side `param1` and `param2` represents `1` and `abc` in the request `/api/1/abc` – Dalorzo Aug 11 '14 at 16:59
  • @Dalorzo how can I achieve the same in Angular 6? – Pritam Bohra Mar 13 '19 at 18:17
  • Hi there, I tried this and it doesn't display any data. Is there something else I should add – mhisham Apr 01 '20 at 17:15
4

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.

Explosion Pills
  • 188,624
  • 52
  • 326
  • 405
  • It seems like this process introduces an extra step with the $http.get vs just doing it with a templating engine. Is it slower this way? – user3727514 Aug 11 '14 at 17:04
  • @user3727514 no because you would have to make the `/view/1` request anyway ... it's just that `$http` does this for you – Explosion Pills Aug 11 '14 at 17:05
  • ok that makes sense. So if my page is very very simple - just pretty much that one variable I want passed in, is it still worth doing this way? or maybe I should just use the template engine? – user3727514 Aug 11 '14 at 17:07
  • @user3727514 tough to answer this question. Do you want to build a single page app (everything on the front end) or do you want a page reload with each request? – Explosion Pills Aug 11 '14 at 17:21
  • its a two page app. One with an index page -showing everything in the db, and one view page - showing specific items in the db. Im already using angular on the index page, and it definitely seems to be the way to go. Now Im wondering whether to use it on the single item view page - which pretty much just needs one attribute of a db item as a variable. Wondering whether to do this with jade or angular. – user3727514 Aug 11 '14 at 18:27
  • is there something else I should add to this. considering the controller is in another different JS file not in a script tag in the html file – mhisham Apr 01 '20 at 17:16