How to pass request parameters back to Angular

Question

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?

Joseph · Accepted Answer · 2015-07-17 14:31:40Z

1

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.

answered Jul 17, 2015 at 14:31

Joseph

120k31 gold badges186 silver badges238 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

MattDionis Over a year ago

Thanks, and I agree that the first approach using an Angular service to get user data is the best one. It just seemed odd to me that I'd need to make a separate API call when the user data I need resides in the request parameters of that initial call.

Joseph Over a year ago

@MattDionis You can always use the router for that.

MattDionis Over a year ago

I ended up creating a currentUser API endpoint that I can hit from an Angular service. If you have a second I'd like to know your thoughts on that approach. Much appreciated!

Plato · Accepted Answer · 2015-07-17 14:55:22Z

0

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}

answered Jul 17, 2015 at 14:55

Plato

11.1k2 gold badges46 silver badges63 bronze badges

Comments

MattDionis · Accepted Answer · 2015-07-17 15:02:59Z

0

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.

answered Jul 17, 2015 at 15:02

MattDionis

3,62610 gold badges55 silver badges111 bronze badges

Collectives™ on Stack Overflow

How to pass request parameters back to Angular

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related