spring-mvc - invocar - spring mvc angular 5
Mezcla Spring MVC con Angular.JS (1)
La directiva ng-view de AngularJS se usa para representar una plantilla asociada a la ruta actual en su página html. El punto principal es que sus plantillas deben ser administradas únicamente del lado del cliente.
Lo que intenta hacer aquí es representar un lado del servidor de plantillas, utilizando Spring MVC, pero esta no es la idea de una aplicación de una sola página con AngularJS.
En su lugar, sus controladores mvc spring solo deben devolver el objeto json: usted escribe servicios RESTful y usa AngularJS para representar su plantilla y recuperar su modelo.
Aquí hay un ejemplo completo para su caso de uso:
index.html:
<html ng-app="myApp">
<head>
</head>
<body>
<!-- Your menu -->
<ul>
<li><a href="#/project/1/rev/1">Project 1 - Rev 1</a></li>
<li><a href="#/project/1/rev/2">Project 1 - Rev 2</a></li>
</ul>
<!-- Your content -->
<div ng-view>
</div>
</body>
</html>
Su plantilla ("template / detail.html")
<div>Id of project : {{project.id}}</div>
Su aplicación angular:
angular.module(''myApp'', []).
config([''$routeProvider'', function($routeProvider) {
$routeProvider.
// Bind your route with your template and associated controller
// Your template will be loaded into ng-view area
when(''/project/:projectId/rev/:revId'', { templateUrl: ''template/detail.html'', controller: MyController }).
// Default route
otherwise({redirectTo: ''/''});
}]);
function MyController($scope, $routeParams, $http) {
// Use $routeParams to get parameter from your current route
var projectId = $routeParams.projectId,
revId = $routeParams.revId;
// Here I use $http API from AngularJS but ng-resouce may be easier to use
// when you have to deal with rest resources
$http.get(''project/'' + projectId + ''rev/'' + revId).success(function(data) {
$scope.project = data.project;
$scope.rev = data.rev;
});
}
Su controlador Spring MVC con su servicio REST:
@RequestMapping(value = "{id}/rev/{rid}/detail", method = RequestMethod.GET)
@ResponseBody
public Map<String, Object> detail(
@PathVariable("id") Project project,
@PathVariable("rid") Rev rev,
HttpSession session) {
User user = ((User) session.getAttribute(CSession.USER));
// I use a map for the example but you should probably use a "real" object
// The idea here is that you return a rest resource
Map<String, Object> map = new HashMap<String, Object>();
map.put("project", project);
map.put("rev", rev);
map.put("cont", revContBS.getRevCont(rev, user));
return map;
}
Tenga en cuenta que si necesita un enrutador más complejo, puede echar un vistazo al proyecto AngularUI.
Quiero hacer una aplicación de una sola página con mi Spring MVC Backend. Acabo de aprender Angular.js.
Tengo un menú a la izquierda que consta de dos enlaces.
Uno hace solicitud al controlador de abajo. Este controlador realiza el reenvío de URL y enumera los detalles de algo que se llena con los atributos del modelo dado.
@RequestMapping(value = "{id}/rev/{rid}/detail", method = RequestMethod.GET)
public String detail(@PathVariable("id") Project project, @PathVariable("rid") Rev rev, Model model, HttpSession session) {
User user = ((User) session.getAttribute(CSession.USER));
model.addAttribute("project", project);
model.addAttribute("rev", rev);
model.addAttribute("cont", revContBS.getRevCont(rev, user));
return "template/detail";
}
El otro realiza una llamada ajax al controlador que devuelve JSON.
@RequestMapping(value = "file/{fid}", method = RequestMethod.GET)
public @ResponseBody String getFile(@PathVariable("fid") FV fv) {
return repBS.getVerCon(fv);
}
Actualmente, tengo una decoración: el encabezado, el menú de la izquierda y el área de contenido principal. Si hago clic en el primer enlace, se actualizará la página por completo (porque hace el reenvío de páginas y la plantilla jsp) Si hago clic en el segundo enlace, solo cambiará el área de contenido principal.
Quiero cambiar el comportamiento del primer enlace porque debería cambiar solo el área de contenido. ¿Es posible con Angular.JS + Spring MVC? Quiero decir, voy a solicitar una página del mvc de primavera. Contendrá la plantilla "template / detail.jsp" con los atributos del modelo dados. Pero pondré esta página en el área de contenido de mi aplicación ng.
Actualmente tengo problemas en las siguientes áreas:
- @RequestMapping (value = "{id} / rev / {rid} / detail", method = RequestMethod.GET) es paramétrico. No pude encontrar una manera de hacer que el reenvío de rutas sea paramétrico.
- No sé cómo debería volver a servir mi "template / detail.jsp" para que se coloque en el div llamado ng-view.