2015-02-10 4 views
0

Я использую Spring MVC и AngularJs иметь веб-службу отдыха проблема, с которой angularJs не работаетSpring MVC, отдых, angularJs

страница home.html

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

тонкостям .html страница

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

контроллер:

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

} 

и для кода angularJS работы модуля:

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

контроллер

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

} 

сервис

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

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

домашняя страница будет отображаться список Villes (городов), и details.html будет иметь более подробное описание всех городов , пожалуйста, почему это не работает?

+1

Потому что вы есть ошибка в вашем коде или ваших ожиданиях, и вам нужно найти его с надлежащей отладкой, например, вести журнал трассировки и исследовать HTTP-запросы и ответы, чтобы узнать, какие данные обмениваются. – Gimby

ответ

0

Я попытаюсь отвлечь вашу проблему и вытащить ее из вашего контекста.

контроллер

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

остальное, что имеет место, если уры web.xml

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

вам понадобится угловое приложение

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

вы можете заключить его в сервисе "рекомендуется"

Смежные вопросы