将AngularJS集成到Spring应用程序中

Question

我的控制器中目前有一个方法可以做到这一点：

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

这将所有json数据返回到页面，如下所示：

{
"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": "[e-mail]",
    "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": "[e-mail]",
        "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": ""
    }
}
}

我的问题是：我如何将这些数据放入AngularJS控制器/工作流中，以便开始将其绑定并放到页面上？

Answer 1

快速启动如下：http://plnkr.co/edit/uUj4MV3RvZB2P4uJt35H?p=preview

这将显示JSON响应中的page.pageDataMap.mailId属性。

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>