整合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": "test@example.com", 
    "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": "test@example.com", 
     "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>