我使用spring mvc和AngularJs来提供休息网络服务 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>
details.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将更详细地描述所有城镇 拜托,为什么它不起作用?
答案 0 :(得分: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;
});
} ]);
您可以将其包含在“推荐”服务中