spring mvc, rest, angularJs

Question

I'm using spring mvc and AngularJs to have a rest web service the problem that angularJs doesn't work

the home.html page

   <!doctype html>
<html ng-app="villeApp">
<head>
    <title>Villes Tunisie</title>
    <meta charset="UTF-8">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js"></script>
    <script type="text/javascript" src="resources/js/app.js"></script>
    <script type="text/javascript" src="resources/js/service.js"></script>
    <script type="text/javascript" src="resources/js/controller.js"></script>

</head>
<body>
    <div ng-view></div>
    <h2>List des villes</h2>

    <div ng-init="villes=[{nom:'sfax', gouvernorat:'Sfax'}, {nom:'Djerba', gouvernorat:'Mednine'},
                       {nom:'Chebba', gouvernorat:'Mahdia'}, {nom:'Ain draham', gouvernorat:'Jendouba'}]">
            <div ng-repeat="ville in villes">
                 <p>
                    <strong>{{ville.nom}}</strong><br>
                {{ville.gouvernorat }}
                </p>    
            </div>
    </div>

    <button ng-click="gotoVilleNewPage()">Plus de détail</button>

</div>
</body>
</html>

the details.html page

 <!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>les villes en details</title>
</head>
<body>
   <div>
    <h3>{{ville.nom}}</h3>
     <div>Gouvernorat</div> 
     <div>{{ville.gouvernorat}}</div>
     <div>caracteristique</div>
     <div>{{ville.caracteristique}}</div>
   </div>   


</body>
</html>

the controller:

    package com.formation.villes.controller;


import java.util.ArrayList;

import java.util.List;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;

import com.formation.villes.model.Villes;

@Controller
@RequestMapping("/villes")
public class VillesController {

    public Villes ville;
    @RequestMapping(value = "/home", method = RequestMethod.GET)
    public @ResponseBody List<Villes> list() {

        List list= new ArrayList<Villes>();
        Villes ville1 = new Villes();
        ville1.setNom("sfax");
        ville1.setCaracteristique("industriel");
        ville1.setGouvernorat("sfax");
        Villes ville2 = new Villes();
        ville2.setNom("Djerba");
        ville2.setCaracteristique("touristique");
        ville2.setGouvernorat("mednine");
        Villes ville3 = new Villes();
        ville3.setNom("chebba");
        ville3.setCaracteristique("touristique");
        ville3.setGouvernorat("mahdia");
        Villes ville4 = new Villes();
        ville4.setNom("ain draham");
        ville4.setCaracteristique("touristique");
        ville4.setGouvernorat("Jendouba");
        list.add(ville1);
        list.add(ville2);
        list.add(ville3);
        list.add(ville4);

        return list;

    }

    @RequestMapping(value = "/villes/{nom}", method = RequestMethod.GET)
    public @ResponseBody Villes getByName(@PathVariable String nom) {
        return ville;
    }

}

and for the angularJS code the module:

    angular.module('villeApp', ['villeService']).
    config(['$routeProvider', function ($routeProvider) {
        $routeProvider.
            when('villes/home', {templateUrl:'html/home.html',   controller:VillesListController}).
            when('villes/:nom', {templateUrl:'html/details.html', controller:VillesDetailsController}).
            otherwise({redirectTo:'/villes/home'});
}]);

controller

    function VillesListController($scope, $location, Ville) {

    $scope.villes = Ville.query();

    $scope.gotoVilleNewPage = function () {
        $location.path("/villes/details")
    };
}

function VillesDetailsController($scope, $routeParams, Villes) {
    $scope.ville = Villes.get({nom:$routeParams.nom});

}

service

 var service = angular.module('villeService', ['ngResource']);

service.factory('VilleFactory', function ($resource) {
    return $resource('/villeApp/rest/villes', {}, {
        query: {
            method: 'GET',
            params: {},
            isArray: false
        }
    })
});

the home page will show the list of the villes(towns), and details.html will have more description of all the towns please, why it doesn't work??

Answer 1

I'll try to abstract your problem and get it out of your context.

rest controller

@RestController
public class StudentRestController {

@RequestMapping(value = "/students", produces = { "application/json" }, method =      RequestMethod.GET)
@ResponseStatus(HttpStatus.OK)
public Student getStudent() {
    // return studentService.getStudentByUserName(userName);
    Student s = new Student();
    s.setUserName("userName");
    s.setEmailAddress("email");
    return s;
}
}

that holds if ur web.xml

<servlet-mapping>
        <servlet-name> dispatcherServlet </servlet-name>
        <url-pattern> * </url-pattern>
    </servlet-mapping>

you 'll need angular app

var app = angular.module('app', []);
app.controller('controller', [ "$scope", "$http", function($scope, $http) {
    $http.get("http://localhost:8080/students").success(function(data) {
        $scope.user = data;
    });
} ]);

you can enclose it in a service "recommended"

spring mvc, rest, angularJs

Question

1 answers

solution1
0 2015-02-10 15:11:32

spring mvc, rest, angularJs

Question

1 answers

solution1 0 2015-02-10 15:11:32

solution1
0 2015-02-10 15:11:32