0

I am pretty new with angular js. My use case is We have a parent page say parentPage.html where we have a link. On click of this link in parentPage I want to send a server hit to a spring controller, which should return us a json response. I want to paste this response in the new window against the childpage.html. How can we achieve this by angular js?

parentPage.html:

<a href="#" target="_blank">Show New Customer</a>

ajax response on click of above link:

{
    customerName:'Adam',
    address:'XYZ',
}

childPage.html(we have to iterate over the above key value pairs such that our result should be painted in the following way:-)

<table>
    <tr>
       <td>customerName:</td>
       <td>Adam:</td>
    </tr>
    <tr>
       <td>address:</td>
       <td>XYZ:</td>
    </tr>
</table>

On google I found enough stuff about the means by which we have to bring things within the scope. My only confusion in this usecase is, since we have to open a new window after sending the http get request(which is being sent from the parentPage.html), the response of which is to be painted in an absolutely new window(which is childPage.html), so isn't this scope going to get lost somewhere since we are not dealing with SPA thing here? Can we achieve this by angular in any possible way?

Humpty Dumpty
  • 57
  • 8

1 Answers1

1

Since angular is meant to work off a one page application and retain the state of most javascript throughout the duration of the application being ran, you really have two option.

The first is to take that JSON response and store it in local storage.

window.localStorage.setItem('key', value);

By doing this, you will be able to pull the value back out at any point by use of the following

value = window.localStorage.getItem('key');

In most cases, you would want to stringify() the JSON before parsing it all out again.

This is one implementation which would definitely work out for you.

Another option would be to make use of ng-model, models are used to store and manipulate data in angularjs, By passing around these values back to your controllers you will be able to easily hold and interact with the state of these variables.

WeeniehuahuaXD
  • 852
  • 3
  • 10
  • 30
  • Thanks Andrew.. window.localStorage seems good to me too. I'll try it out once.The scope of this variable that I will be holding in window.localStorage would be confined to the new window right? Coz I have to open multiple such childPage.html in new windows but with different values and same key I suppose. I am wondering if this key shouldn't keep on retrieving the same value for every new window that I open or the values will be overridden every time for new window? – Humpty Dumpty Sep 06 '15 at 03:13
  • Wow. Thanks Andrew. It is working perfectly allright on chrome. But sadly, failing on IE9. http://stackoverflow.com/questions/7374355/localstorage-setitem-not-persisting-on-refresh/7377302#7377302. May be I can try executing the html by means of tomcat and not directly from the file system. Or I'll try out ng-model otherwise. Thanks anyways.:) – Humpty Dumpty Sep 06 '15 at 14:52