I was learning about Spring REST HATEOAS. But, I am confused about how we use it on the client end..
I mean, let's say I want write a client app using Angular JS. So now I don't have to hardcode the URL's to make REST API calls? And instead i'd use the "rel" attribute that gets returned?
for example, from angular JS,
I'd use the root URL "/products"
It returns links to individual products (Which I believe will be populated on UI)
User selects a product and angular will fetch the product details, along with relevant links to that product to delete, edit, etc..
If user clicks on delete, Angualar will use the URI specified in "rel=delete" to delete that product..
Is my understanding correct?
Is there a sample angular code, that doesn't hardcode URI but use the rel attribute?
Related
I've got a component that downloads data from an API. When the user clicks Search, the content from the API is fetched via AJAX. This content from the API is in JSON and has got an ID of the product inside. I am able to create new HTML elements based on this content and put them inside my site, but I would like every created on the fly element to have routerLink="/detailsPage/itemID" working, so that after clicking it would route to detailsPage with apropriate ID. How to do it in the most simple way? I assume some recompiling of refreshing is needed.
The answer to this question is HTTPClient - Angular offers it as an easier way to use XMLHttpRequest (AJAX) in Angular applications, and using it also makes sure that routerLink or any other Angular directives will work on objects created dynamically with this method.
Angular - HTTPClient
I am a complete newbie to AngularJS. I want to check the feasibility of using it in my new Project which is a web application. I already have a few pages created in project using Struts2 Spring and hibernate. To convert these following are points I understand:
Convert server side API to REST style which returns JSON data
Question: Can I use dynamic HTML to load using AngularJS. I guess yes. not sure how?
Currently I use velocity Templates on server side to populate data in HTML templates and send it as response in AJAX? What would change if i try to use AngularJS?
I have a landing page which is used to show some images and data associated with it which is stored in DB. How can I show it using AngularJS?
Question: Shall I load the HTML template which contains only one div tag when I hit website URL(mysite.com) and then fire AJAX requests to load the dynamic HTML?
If I use AndularJS does it invalidate use of Struts2 altogether if I choose to implement my Data API as REST with JSON? I guess not as I will still need to load dynamic HTML views which will be generated on Server correct?
How to maintain HTTP session state on server side if I use REST data API with AngularJS on client?
I know I can search and read about answers to above questions on net somewhere. I just need them at one place so that I can carry discussion and other questions that arise from it.
I may answer some of your questions:
1) Convert server side API to REST style which returns JSON data
Yes
Question : Can I use dynamic HTML to load using AngularJS. I guess
yes. not sure how?
Currently I use velocity Templates on server side to populate data in HTML templates and send it as response in AJAX? What would change
if i try to use AngularJS?
If I understood you right, you want to generate templates on server-side. In this case - you just don't need AngularJs - your views are prepopulated on server and browser recieves static content (from client-side point of view). If you want to use AngularJs, then your templates will become static content (from server-side point of view) and they will be populated by angular via REST services.
2) I have a landing page which is used to show some images and data
associated with it which is stored in DB. How can I show it using
AngularJS?
Question : Shall I load the HTML template which contains
only one div tag when I hit website URL(mysite.com) and then fire AJAX
requests to load the dynamic HTML?
Not exactly. One div would be enough for jQuery-based approuch (you would use something like $.ajax and then appended data in imperative way). In case of Angular you will need to return template. It may look like this:
<ul ng-controller="MyCtrl">
<li ng-repeat="item in data">
<img ng-src="item.image.src">
<span>{{item.data.someTextProperty}}</span>
</li>
</ul>
And some AngularJs controller that will fire request to REST service (via your AngularJs service, probably) and autmatically fill template with results
function MyCtrl($scope, $http) {
$http.get('/rest/data').success(function(result) {
$scope.data = result;
});
}
3) If I use AndularJS does it invalidate use of Struts2 altogether if
I choose to implement my Data API as REST with JSON? I guess not as I
will still need to load dynamic HTML views which will be generated on
Server correct?
I think it will only invalidate use of View of MVC in Struts, since AngularJS will just replace it. Also it will make you to use something like RESTful controllers (not quite familliar with Struts, but I think there is something like this)
4) How to maintain HTTP session state on server side if I use REST
data API with AngularJS on client?
This is not short answer, but basically there is following pattern. AngualrJs provides http interceptors, that may intercept requests and responses. If response with code 401 (which is unauthorized) is intercepted, you may provide your user with a login form to restore session and after this action will be completed, retry last request. Also, here you may find another aspect of this question.
I hope my answer helped you.
I am starting a new web app as a hobby and had a difficulty with the architecture.
The frond end will be HTML and some JavaScript for requests.
And the backend ,will be implemented in Java and using Spring Framework.
Lets say for example a library page where the user can view his books and his personal information.
Personal Info
-------------
Book 1
Book 2
Book 3
I want to implement this features with 2 REST services ,one for the personal information ,and another for the books that the person has.
Ex .
www.mybib.org/users/123/
www.mybib.org/users/123/books/
The thing is ,when a user first request the home page to view his books and his personal information ,how to compose this page.
Use a servlet / controller who replicate the code of the 2 REST
services and then redirect to a JSP to format a HTML and JavaScript.
Once the first load is done, for each update on the page use the Rest
services .I think this is actually very bad design.
From a servler / controller call the REST services and then call JSP
in order to compose a HTML and JavaScript output.Then for each update
call the REST services.
From a servlet / controller return a HTML layout and make the
javascript make 2 Ajax request when loading the page.
...or something else.
As you can see I am pretty new to this and in fact this is actually my first attemp to biuld a very simple web application.
The easiest way is to simply have some kind of IndexController which after, fetching the current users list of books renders the page right away, no extra AJAXy REST calls needed.
If you are new to all of this, that's how I would start out. You may also want to have a look at the code in the Spring 'petclinic' sample application: https://src.springframework.org/svn/spring-samples/petclinic
If you must use Ajax, I'd still have a IndexController and an index.jsp that renders the initial page. After that you javascript code can make the REST calls, for which you implement a different controller.
In mvc sitemap provider I want to show a list menu's based on the id of the logged in user.I was thinnking about dynamicnodeprovider but it is working for the first request it self that is before logging in.How can i achieve this?
Thanks,
Ajai
You could use cookies to achieve that. Set a cookie when the user logs in and read it when he comes back. Obviously this wouldn't work if:
the user blocks cookies
the user visits the site for the very first time
so you would need a default view for first visits; i don't think you can avoid this problem.
You could take the approach of making a JQuery AJAX call to a controller method which returns the required sitemap information. This enables you to update the sitemap whenever you like based on client side events.
e.g. see this post : http://joelabrahamsson.com/entry/xml-sitemap-with-aspnet-mvc
Another decision is if you want the controller to return the sitemap as ready generated HTML and dynamically replace it in the DOM. Or ( more work ) return the pure sitemap in XML and have JQuery generate the SiteMap markup for you.
I have a PHP MVC Web App and Apache mod_rewrite rules already working fine, but when I create forms using method="get", the submitted URL looks like
contact/submit?a=b&c=d
I would like my form to submit to
contact/submit/a/b/c/d
Both posting and getting the form work fine on the server side, but when using post method, the back button always asks for reposting the form values and furthermore I want the strings in the URL for SEO. I think JQuery might let me intercept the form submit event and refresh to the url dynamically, but it it seems there must be an easier way to do it that I am missing.
You could use the POST->REDIRECT->GET pattern that Spring Web Flow utilizes. This would allow you to post as you wish and then redirect to contact/submit/a/b/c/d. It would also solve the problem with the back button asking you if you want to resubmit your form data. See this related article.
The GET method uses standard query string arguments to pass form data via an HTTP GET request.
The HTTP GET request is not intended to modify any data on the server. POST is designed for modifying data on the server.
GET may be cached. POST will not.
/a/b/c/d is not a standard format (as in RFC) for passing data. However, for requesting data or URLs to post to, that has become popular.
So, if you are updating server data, just use a POST -> REDIRECT -> /a/b/c/d.
If you are just reading data from the server, then you will need to use a bit of Javascript to read your form values and construct a query string, and then go to it with window.location = ...
Have fun!