Getting data from Spring MVC in Angular JS in the initial view call

Question

I am new to Angular JS, I have created a Spring MVC web application with Angular JS, I know that from view we can call REST services from Angular JS using resource, restangular, http , But say in Spring form the Controller a view is been triggered and for loading the datas through angular within the view again a REST call from angular is been called from view to the server and gets the datas thereafter for loading, Instead is there any way to pass the json object while triggering the view from Spring controller to the Angular JS at the first time itself.

enter image description here

I have done a similar thing, its working fine but don't know whether its a good approach or not.

Spring controller

@RequestMapping("/getemployee")
public ModelAndView helloWord(){
   JSONArray employeeJsonArray = // contains all the information of the employee
   return new ModelAndView("employee", "employee",employeeJsonArray);
}

employee.jsp

<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Spring 3.0 MVC Series: Hello World</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('MyCtrl', function($scope) {
    $scope.employee = [];
    $scope.loadData = function(employee)
    {
        $scope.employee = JSON.parse(employee);
    };
});
</script>
</head>
<body ng-controller="MyCtrl">
{{loadData('${employee}')}}

 <input type="text" ng-value="employee[0].name"/>
</body>
</html>

Are you asking whether you can supply the json data with the page, like you would with a traditional request/response application? — dspies
– dspies, Commented Jun 8, 2014 at 13:32
yes, but data needs to be passed from the server with the initial view call itself — Alex Man
– Alex Man, Commented Jun 8, 2014 at 13:34
However with the above scenario , there could be flickering , with the content being displayed momentarily . Hence the Use of ng-cloak . <span ng-cloak>{{payCntrl.loadContactAddress('${contactAddress}')}}</span> With the CSS : [ng\:cloak], [ng-cloak], .ng-cloak { display: none !important; } — Roshan Khandelwal
– Roshan Khandelwal, Commented Jan 28, 2015 at 21:55

dspies · Accepted Answer · 2014-06-08 13:58:33Z

5

Angular really shines when you use it in a "single" page application, so I would suggest using it as you suggested in your "existing approach" as it moves you closer to a single page app design, however, if you are just trying to get some of the features of Angular in an existing request/response application, then you could send your html payload with the data in ng-init as this page demonstrates. It's a RoR example, but I think the point is clear. I think it is a bit of hack, but should get the job done.

   <body ng-init="angularVariable = ${variableFromServer}">
     html/angular ...
   </body>

edited Jun 8, 2014 at 13:58

answered Jun 8, 2014 at 13:46

dspies

1,55314 silver badges19 bronze badges

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

11 Comments

Alex Man Over a year ago

in my application where should i call that

Alex Man Over a year ago

otherwise if we are using the existing approach as shown in the picture, two server calls is been made right, instead if we can load the data at the initial call itself we can prevent two calls right

dspies Over a year ago

True, 2 server calls are made. Initial request/response to render the page and 1 more for the data. It depends on your ultimate goal. If you are trying to bolt on features to a legacy app, you could use ng-init. If you working on a new app, I would suggest going the single page application route.

Alex Man Over a year ago

Getting Error: [$parse:ueoe] this is my code <body ng-controller="MyCtrl" ng-init="employee = ${employee}">

Saurabh Over a year ago

I am getting Syntax Error: Token '{' is an unexpected token at column 13 of the expression [ on using this

|

NimChimpsky · Accepted Answer · 2014-06-08 13:49:32Z

2

I recently switched to using angular, the beauty of it is you can ditch jsp's entirely and just have static html as the frontend. Served as a static resource by spring.

To initially populate your form/tables/whatever - lots of different options do it in javascript/angular. But its nice to keep your view seperate from your controllers (ie don't use jsp's).

answered Jun 8, 2014 at 13:49

NimChimpsky

47.5k61 gold badges202 silver badges319 bronze badges

1 Comment

Matthew Payne Over a year ago

They are completely ditched except for something to return contextPath for service call root paths. If sometimes have my app.js interpretedby a freemarker servlet and set some config variable to base: '${base}'

Darshaa · Accepted Answer · 2017-03-09 16:05:33Z

0

You can use below code for get user logging,

<input type="text" ng-model ="currentLoging" ng-init= "currentLoging='${pageContext.request.userPrincipal.name}'" />

answered Mar 9, 2017 at 16:05

Darshaa

251 silver badge7 bronze badges

Collectives™ on Stack Overflow

Getting data from Spring MVC in Angular JS in the initial view call

3 Answers 3

11 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

11 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related