How to load the HTML, containing AngularJS, using RESTful access

Question

When NOT using AngularJS, I create a web site that responds to /mysite/users . It returns an HTML page with user records filled within a table-like display.

I wish to try an AngularJS approach. I somehow load the web page, and that page's onload() calls /mysite/users, which returns merely a JSON list of users.

The "somehow" part is what bothers me. So far I'm reduced to first calling /mysite/showUsers. This downloads the HTML page which then itself calls /mysite/users.

Likewise, when editing with AngularJS I think I'll have to call /mysite/userEdit/1 which on load calls /mysite/user/1.

I think I'm missing something. Can I get a clue? Thanks, Jerome.

Collin Allen · Accepted Answer · 2014-12-20 06:18:40Z

1

As you've noted, the AngularJS approach is not to load pre-rendered HTML from the server, but instead load a list of JSON data and rely on AngularJS directives to populate the DOM client-side.

A concrete example in your case would be a page which loads an Angular module that fetches a JSON list of users from /api/users, and leverages the ng-repeat directive to populate the data into the page right in the visitor's browser. Here's a JSFiddle I found that illustrates how you'd accomplish this.

It's all a matter of where the data gets inserted into the HTML; It can happen on the server-side or the client-side, and Angular favors the latter. (This is not to say you can't load pre-rendered HTML from the server, but you would be working against the way AngularJS is designed to be used.)

edited Dec 20, 2014 at 6:18

answered Dec 18, 2014 at 20:33

Collin Allen

4,5953 gold badges40 silver badges53 bronze badges

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

Comments

Jerome P Mrozak · Accepted Answer · 2014-12-23 16:13:32Z

0

I've had trouble describing what I want to have happen. Perhaps it is because it goes against the grain of Angular.

My server responds to /user/1 with the JSON for user #1. For the browser to deal with it, I must have a web page already there that can display this JSON. Chicken and egg style, how do I get this edit web page into the browser? My classic example is using /user to list the users and having a link on each user to edit it, such as "/SOMETHING/1".

In the meantime, I've decided to go with /user/edit/1. That will cause the server to render an HTML file, using server-side scripting to insert a phrase that on window.onload() fills the skeleton HTML with the result of /user/1.

Thanks, Collin, for replying.

answered Dec 23, 2014 at 16:13

Jerome P Mrozak

1,9574 gold badges21 silver badges36 bronze badges

2 Comments

Jerome P Mrozak Over a year ago

I implemented /user/edit/1 to fetch an HTML page. In its onload event it calls /user/1 to fill the fields. All is OK. I then added /user/list to load a search page HTML which then calls /user to fill it. Not good. This is interpreted as "get a user with id=list". I'm reduced to /users/list and /users.

Jerome P Mrozak Over a year ago

I'm a stubborn person. I found a way to make thing work with /user/list, etc. In the express.Router the sequence you enter your routes is the sequence in which the program tries to satisfy them. I can get the /user/edit or /user/list to work if I place them very first in line, with /user/edit/:id following.

Collectives™ on Stack Overflow

How to load the HTML, containing AngularJS, using RESTful access

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related