how to catch nodejs api data in AngularJS page?

Question

this is api code i am using and passing some parameters

app.get('/opner',function (req, res) {
    res.sendFile(
       path.join(__dirname, './','dist', 'index.html'),
       {user: req.session.user,value1:req.session.value1}
    );
});

i am serving angular with the same api. in this case in ejs i can directly access this user and value1 with <%= user %> like this. but how to use the same in angular app

<div class="form-group">
  <h4> value 1:</h4>
  <textarea class="form-control" rows="8" ng-model="tx.data"></textarea>
</div>
<div class="form-group">
  <h4>user:</h4>
  <input class="form-control" type="text" ng-model="tx.user"/>
</div>

so i want to render this page with value1 and user values present. so how to read and display in angular?

Answer 1

The node function res.sendFile is not the same as res.render .

res.render is for rendering EJS (or pug, or other pre-renderer). res.sendFile only send file.

You cannot use the second argument of res.sendFile to send data alongside your index.html like you would do in EJS

The right way to do it would be to create another express route (like /getUser ), and to send the json in this route with res.json({req.session.user,value1:req.session.value1})

You will then have to do a ajax request in Angular. if you use Angular 1.x, I think the service name is http for Angular 2+, the service name is HttpClient .

Once you have queryed the data, you can show it in your angular template like so:

<h4> value 1: {{tx.data}}</h4>

supposing you put your data on the $scope.tx.data object (angular 1.x) or as this.tx = {data : data, user : user} on the class of your component (angular 2+)

Answer 2

Like Felix says is better to make your own GET route to get the data via http request, but ifyou want to avoid that you need to use a template engine (like EJS or Pug) because Angular is loaded after template rendering.

res.render('yourPath/index.html', {user: req.session.user, value1: req.session.value1});

And in your AngularJS side you can use ng-init. EJS example:

    <div class="form-group" ng-init="tx.data = '<%= value1 %>';tx.user = '<%= user %>'">
       <h4> value 1:</h4>
       <textarea class="form-control" rows="8" ng-model="tx.data"></textarea>
    </div>
    <div class="form-group">
       <h4>user:</h4>
       <input class="form-control" type="text" ng-model="tx.user"/>
    </div>

PUG Interpolation example:

    <div class="form-group" ng-init="tx.data = '!{value1}';tx.user = '!{user}">
       <h4> value 1:</h4>
       <textarea class="form-control" rows="8" ng-model="tx.data"></textarea>
    </div>
    <div class="form-group">
       <h4>user:</h4>
       <input class="form-control" type="text" ng-model="tx.user"/>
    </div>