繁体   English   中英

spring mvc,休息,角度

[英]spring mvc, rest, angularJs

我正在使用spring mvc和AngularJs来拥有一个休息的Web服务问题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请提供所有镇的更多说明,为什么它不起作用?

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

休息控制器

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

您可以将其包含在“推荐”服务中

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM