Spring MVC的，休息，angularJs [英] spring mvc, rest, angularJs
本文介绍了Spring MVC的，休息，angularJs的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我使用Spring MVC和AngularJs休息一下Web服务
该问题angularJs不起作用
I'm using spring mvc and AngularJs to have a rest web service the problem that angularJs doesn't work
在home.html的页
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>
在details.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>
控制器：
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 code
该模块：
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'});
}]);
控制器
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将所有的城镇更多的描述
请，为什么它不工作？
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.
休息控制器
@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>
您将需要的角度应用
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的，休息，angularJs的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
