Get data in Angular 2 from Spring - spring

Question

Let's say that I have a page rendered by Spring Framework. It is a page with Angular 2 code. How could I receive data on the page if Spring sends it? I do not want to render a page, then do an HTTP request, then get a response. No, in Spring controller I want to send data and somehow receive it with Angular 2 and show (without additional requests). With JSPs it is obvious how to do, but how to set Angular 2 model from JSON sent by Spring upon rendering the page?
What I have right now is Spring Security managing login. Then, in controller data gets prepared depending on the user, and then I want to send it to Angular 2 page. So, I am stuck with not knowing how to render a page AND attach data for it to be rendered by Angular 2 at the same time.

Answer 1

I'm not sure if I totally understood the question... anyway if I did, I'd do in this way
In spring controller, before rendering the JSP page, i'd all the business logic you need to create the JSON; then I'd create a JSON string and I'd attach it to the model
It means I'd do something like that:
#RequestMapping("/render")
public String renderView(ModelAndView model)
{
//Your JSON String
String json = "{\"foo\":\"bar\"}";
model.addAttribute("json", json);
return "yourJspName";
}
Then in your JSP you can use Angular to access to the json contained in the model (that is in the pageContext); for example, by using JSTL:
<script type="text/javascript">
var theJsonString = '${json}';
</script>
or
<script type="text/javascript">
var theJsonString = '<c:out value="${json}" />';
</script>
At this point you have the JS variable named theJsonString with your JSON string and you can use it as you want... for example by passing it to angular
If you need JSON object you should to something like this:
<script type="text/javascript">
var theJsonString = '${json}';
var theJsonObj = JSON.parse(theJsonString);
</script>
or
<script type="text/javascript">
var theJsonString = '<c:out value="${json}" />';
var theJsonObj = JSON.parse(theJsonString);
</script>
I hope this can help
Angelo

Answer 2

I was able to solve the problem but by redesigning the app and not by finding a real fix. What I was doing is starting Angular 2 app, have some navigation, functionality on the page, then one could click login, and Spring Security came into play. However, after verification I could not figure out how to launch Angular 2 app again: start a completely new one? Or somehow use the already launched to proceed with the development? Not sure.
What I did is just start the app by showing login page always at the very beginning and only after user logs in, Angular 2 comes into play. I guess, I could set up a second website to develop another Angular app, and make a link there that would launch this one, if we need some functionality before user logs in. The problem was that I was trying to split one Angular app into two, I guess.
Just in case, here is my security.xml part (Spring Security version 4.0.4.RELEASE):
<http use-expressions="true">
<intercept-url pattern="/views/**" access="hasAnyRole('ROLE_CUSTOMER', 'ROLE_ADMIN')" />
<form-login
login-page="/login.jsp"
login-processing-url="/views/home"
authentication-failure-url="/login.jsp?error=failed_login"
/>
<logout logout-url="/logout" logout-success-url="/login.jsp" delete-cookies="JSESSIONID" />
<remember-me />
<headers>
<cache-control/>
<xss-protection/>
</headers>
</http>
Login form:
<form class="form-signin" method="POST"
action="${pageContext.servletContext.contextPath}/views/home">
<h2 class="form-signin-heading">Please sign in</h2>
<label for="inputEmail" class="sr-only">Email address</label>
<input type="text" name="username" class="form-control" placeholder="Login" required autofocus>
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" name="password" class="form-control" placeholder="Password" required>
<div class="checkbox">
<label>
<input type="checkbox" value="remember-me"> Remember me
</label>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
<input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}"/>
</form>
And a controller that launches Angular application upon successful log in:
#RequestMapping("/views/home")
public String login() {
return "index";
}
Then, in launched Angular 2 app I am planning to fetch the data by making HTTP requests, and using Springs' controllers to return me JSON. So, after Angular is launched it works by itself just interacting with the server via HTTP. After logging out a user will not get access to Angular app because it is under a protected folder and index.jsp is not in the app root folder, so it can not be launched by accessing / path.