Integrating AngularJS into Spring Application

Question

I currently have a method in my controller which does this:

@RequestMapping(value="/angular", produces="application/json")
public @ResponseBody Page handleAngularRequest(Model model, HttpServletRequest httpRequest){
    return pageObject;
}

This returns all json data to the page like so:

{
"pageId": null,
"organizationId": null,
"pageModule": "browse",
"pageTitle": null,
"pkId": null,
"templateId": null,
"dataMap": null,
"pageEventList": null,
"pageElementList": null,
"tableId": null,
"elementId": null,
"elementDictionaryList": null,
"elementDictionaryEventList": null,
"elementIds": null,
"pageDataMap": {
    "pageObjectId": "",
    "module": "REQUISITION",
    "mailId": "[email protected]",
    "sessionId": "9d538ba3-2d41-4d5b-9f0d-4ac467f5e62e",
    "requestId": "21061c6c-2868-46c7-bd31-bbebfb2eee4e",
    "userId": "JHUBBARD0000000",
    "pages": "",
    "systemId": "9d538ba3-2d41-4d5b-9f0d-4ac467f5e62e",
    "service": "",
    "formatHeader": "Y",
    "extrinsic": {
        "pageObjectId": "",
        "module": "REQUISITION",
        "mailId": "[email protected]",
        "sessionId": "9d538ba3-2d41-4d5b-9f0d-4ac467f5e62e",
        "requestId": "21061c6c-2868-46c7-bd31-bbebfb2eee4e",
        "userId": "test",
        "pages": "",
        "systemId": "9d538ba3-2d41-4d5b-9f0d-4ac467f5e62e",
        "service": "",
        "formatHeader": "Y"
    },
    "header": {
        "RequisitionHeader_icReqHeader": ""
    }
}
}

My question is: How do I get this data into an AngularJS controller/workflow so I can start bindding it and putting it onto a page?

David Riccitelli · Accepted Answer · 2013-11-22 15:28:00Z

A quick start-up would be like this: http://plnkr.co/edit/uUj4MV3RvZB2P4uJt35H?p=preview

This will show the page.pageDataMap.mailId property from the JSON response.

app.js

angular.module('app', [])
  .service('ApiService', ['$http', '$q', function($http, $q) {
    return {
      query: function() {
        var deferred = $q.defer();

        $http.get('/angular')
          .success(function(data) {
            deferred.resolve(data);
          });

        return deferred.promise;
      }
    };
  }])
  .controller('Controller', ['ApiService', '$scope', function(ApiService, $scope) {

    $scope.page = {};

    $scope.refresh = function() {
      ApiService.query()
        .then(function(data) {
          $scope.page = data;
        });
    };

    $scope.refresh();
  }])

index.html

<div ng-app="app" ng-controller="Controller">
  <div ng-bind="page.pageDataMap.mailId"></div>
</div>

Collectives™ on Stack Overflow

Integrating AngularJS into Spring Application

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related