CODEWITHSUNDEEP
javascriptangularjsnode.jshttpexpress
MattDionis
MattDionis

Reputation: 3616

How to pass request parameters back to Angular

I currently have an app which uses Express with Jade templates. I'm building a new version of the app using Angular with client-side HTML.

I need access to certain request parameters in order to determine user permissions in my Angular code. My problem is that I don't know how to get ahold of these parameters in my Angular controllers/services.

Below is what currently occurs in Express with the Jade structure:

routes.js:

router.get('/player/:id',
  playerRoute.show
);

player.js:

var show = function(req, res) {
  res.render('player', {user: req.user});
};

...and now my new version's handler:

var player = function(req, res) {
  //res.sendFile(path.join(__dirname, '../v2', 'index.html'));
  res.json({user: req.user});
};

The correct user JSON is sent back to my client-side with the code above. When res.json is commented out and res.sendFile uncommented the correct HTML is rendered. My dilemma is how to both render this HTML AND provide my client-side Angular code with the user JSON object?

Upvotes: 0

Views: 738

Answers (3)

MattDionis
MattDionis

Reputation: 3616

Here's how I ended up handling this situation. I simply created a new API endpoint which I can easily hit with an Angular service. Here's the Node setup:

routes.js:

router.get('/currentUser',
  apiController.currentUser.index
);

currentUser.js:

var index = function(req, res) {
  res.json({user: req.user});
};

module.exports = {
  index: index
};

Still seems odd to me to make an API call to get the request parameters, but it works. Feedback appreciated.

Upvotes: 0

Plato
Plato

Reputation: 11052

copied from my own answer to a similar question

To get a variable from server to client javascript try templating a json string into the html and loading it from the javascript. EJS handles quote escaping and I think Jade does too. For reference content!= safeString tells Jade to skip escaping, so does content !{safeString}.

- var user={id:1, displayName:'foo'}
#example
  meta(data-userJSON=JSON.stringify(user))
script(src="//code.jquery.com/jquery-1.11.3.min.js")
script.
  var user = JSON.parse(
    $('#example meta').attr('data-userJSON')
  )
  console.log(user);
span #{user.id}
span #{user.displayName}

Upvotes: 0

Joseph
Joseph

Reputation: 119837

After all that, your question just boils down to:

MY dilemma is how to both render this HTML AND provide my client-side Angular code with the user JSON object?

You don't. The usual case is to just render the HTML along with the assets needed to render the initial app (hide everything, show a splash screen whatever). Further data (like getting your user) is handled by API calls to your server via Angular's HTTP facilities. That means they are separate. After that API call, your app determines what to render.

Otherwise, you could just render the data in the HTML as some global variable and have Angular pick it up from there. This is messy IMO, but doesn't require a separate API call to get the data.

Upvotes: 1

Related Questions