current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

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

share|improve this question
1  
Because you have a bug in either your code or your expectations and you need to find it with proper debugging, such as doing trace logging and investigating HTTP requests and responses to see what data is exchanged. –  Gimby Feb 10 at 12:28

1 Answer 1

up vote 0 down vote

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"

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.