spring mvc, rest, angularJs

spring mvc, rest, angularJs

本文关键字：angularJs rest spring mvc      更新时间：2023-09-26

我正在使用springmvc和AngularJs来获得rest web服务angularJs不工作的问题

主页.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
        }
    })
});

主页将显示村庄（城镇）的列表，details.html将对所有城镇进行更多描述拜托，为什么它不起作用？？

我将尝试抽象您的问题，并将其脱离上下文。

休息控制器

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

你需要angular应用

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

您可以将其包含在"推荐"的服务中

相关文章：