MVC molla di miscelazione con angolare.JS

Desidero creare un'applicazione a pagina singola con il backend MVC Spring. Ho appena imparato Angular.js.MVC molla di miscelazione con angolare.JS

Ho un menu a sinistra composto da due collegamenti.

Uno fa richiesta al controller di sotto. Questo controller esegue l'inoltro url e elenca i dettagli di qualcosa che viene riempito dagli attributi del modello specificato.

@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"; 
}

L'altro effettua una chiamata ajax al controller che restituisce JSON.

@RequestMapping(value = "file/{fid}", method = RequestMethod.GET) 
public @ResponseBody String getFile(@PathVariable("fid") FV fv) { 
     return repBS.getVerCon(fv); 
}

Attualmente, ho una decorazione: l'intestazione, il menu di sinistra e l'area del contenuto principale. Se faccio clic sul primo collegamento, si aggiornerà una pagina intera (perché rende l'inoltro della pagina e il jsp template) Se clicco sul secondo link, cambierà solo l'area del contenuto principale.

Desidero modificare il comportamento del primo collegamento perché dovrebbe modificare solo l'area del contenuto. E 'possibile con Angular.JS + Spring MVC? Voglio dire, richiederò una pagina dal mvc di primavera. Sarà modello "template/detail.jsp" con determinati attributi del modello. Ma inserirò questa pagina nell'area dei contenuti della mia app-ng.

Attualmente, ho dei problemi nelle seguenti aree:

@RequestMapping (value = "{id}/giri/{} RID/dettaglio", metodo = RequestMethod.GET) è parametrico. Non sono riuscito a trovare un modo per rendere parametrico l'inoltro del percorso.
Non so come dovrei ri-servire il mio "template/detail.jsp" in modo che venga inserito nel div chiamato ng-view.

fonte

2013-06-24 user706071

La direttiva ng-view di AngularJS viene utilizzata per eseguire il rendering di un modello associato al percorso corrente nella pagina html. Il punto principale è che i tuoi modelli devono essere gestiti solo dal lato client.

Quello che si tenta di fare qui è quello di eseguire il rendering di un lato server modello, utilizzando Spring MVC, ma questa non è l'idea di un'applicazione singola pagina con AngularJS.

Invece, i controller MVC primavera dovrebbe restituire solo oggetto JSON: si scrive servizi RESTful e utilizzare AngularJS per rendere il modello a prendere il vostro modello.

Ecco un esempio completo per il vostro caso d'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>

Il modello ("template/dettaglio.html ")

<div>Id of project : {{project.id}}</div>

L'applicazione angolare:

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; 
    }); 
}

Il controller Spring MVC con il servizio 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; 
}

Nota che se avete bisogno di un router più complesso, si può avere uno sguardo al progetto AngularUI

fonte

2013-07-04 16:03:59 Mickael

Come sarebbe la struttura del progetto per questo esempio? – burseaner

MVC molla di miscelazione con angolare.JS

risposta

Problemi correlati