spring mvc, rest, angularJs

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??

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"