Le mélange Spring MVC avec Angular.JS

Je veux faire une Seule Page de l'Application avec mon Spring MVC Backend.
J'ai juste appris Angular.js.

J'ai un menu à gauche, composé de deux liens.

On fait la demande au contrôleur. Ce contrôleur permet la redirection d'url et répertorie les détails de quelque chose qui est rempli par le modèle donné attributs.

@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'autre fait un appel ajax pour le contrôleur qui renvoie du JSON.

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

Actuellement, j'ai une décoration: l'en-tête, le menu de gauche, et la zone de contenu principal.
Si je clique sur le premier lien, il va faire un rafraichissement de la page (car il fait de page de l'expédition et du template jsp)
Si je clique sur le deuxième lien, il ne fera que changer la zone de contenu principal.

Je veux changer le comportement du premier lien, car il ne devrait changer que la zone de contenu.
Est-il possible avec Angular.JS + Spring MVC?
Je veux dire, je demande une page à partir de la spring mvc. Il sera template "template/détail.jsp" avec les attributs de modèle. Mais je vais mettre cette page dans la zone de contenu de mon ng-app.

Actuellement, j'ai des problèmes dans les domaines suivants:

  1. @RequestMapping(value = "{id}/rev/{rid}/détail", method = RequestMethod.GET) est paramétrique. Je ne pouvais pas trouver un moyen de faire la route transfert paramétrique.
  2. Je ne sais pas comment je dois re-servir mon "template/détail.jsp" de sorte qu'il sera placé dans le div appelé ng-view.
InformationsquelleAutor user706071 | 2013-06-24
  1. 23

    La directive ng-vue d'AngularJS est utilisé pour effectuer le rendu d'un modèle associé à l'itinéraire actuel dans votre page html.
    Le point principal est que vos modèles devraient être gérés côté client seulement.

    Ce que vous essayez de faire ici est de rendre un template côté serveur, à l'aide de Spring MVC, mais ce n'est pas l'idée d'une seule page de l'application avec AngularJS.

    Au lieu de cela, votre spring mvc, les contrôleurs ne doit renvoyer qu'objet json : vous écrivez services RESTful et utiliser AngularJS pour rendre votre modèle et récupérer votre modèle.

    Voici un exemple complet pour votre cas d'utilisation :

    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>

    Votre modèle ("template/detail.html")

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

    Angulaire de votre demande :

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

    Votre contrôleur Spring MVC avec votre service de REPOS :

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

    Notez que si vous avez besoin d'un plus complexe du routeur, vous pouvez jeter un oeil à AngularUI projet.

    • Comment le projet de la structure de ressembler à cet exemple?
    InformationsquelleAutor Mickael