CODEWITHSUNDEEP
javascriptangularjsrest
Jerome P Mrozak
Jerome P Mrozak

Reputation: 1957

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

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.

Upvotes: 0

Views: 399

Answers (2)

Jerome P Mrozak
Jerome P Mrozak

Reputation: 1957

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.

Upvotes: 0

Collin Allen
Collin Allen

Reputation: 4585

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

Upvotes: 1

Related Questions