Question

我目前正在尝试使用springboot，java和angular js构建单页面应用程序。我有一个多页面应用程序，我的java控制器处理所有路由。现在我实现了角度js路由，它与我的Controller冲突。我需要找到一种方法将此控制器重写为angular，以便我的值可以在UI上正确显示。

@Controller
public class IndexController {      
    @Autowired
    JAXSample index;    
    @Autowired
    VD_Repo vdRepo;
    @Autowired
    PD_Repo pdRepo;
    @Autowired
    CH_Repo chRepo;     

    @RequestMapping(value = "/", method = RequestMethod.GET)
    public ModelAndView index(Locale locale) throws MalformedURLException {
        ModelAndView model = new ModelAndView("index");    
        return model;
    }

    @RequestMapping(value = "/getValues", method = RequestMethod.GET)
    public ModelAndView getvalues(Info  info) throws MalformedURLException {

        ModelAndView model = new ModelAndView("getvalues");
        model.addObject("Haddress", info.getHouseAddress());

        dCert custinfo = index.readXML(info.getHouseAddress());
        model.addObject("custinfo", custinfo);
        model.addObject("checked", true);           
        model.addObject("ch", chRepo.getAll(info.getHouseAddress()));
        model.addObject("pd", pdRepo.getAll(info.getHouseAddress()));
        model.addObject("vd", vdRepo.getAll(info.getHouseAddress()));

       return model;
    }

Angular script

var App = angular.module('App', ['ngRoute']);
     App.config(function($routeProvider) {
    $routeProvider

        .when('/', {
            templateUrl : 'pages/home.html',
            controller  : 'mainController'
        })

        .when('/getValues', {
            templateUrl : 'pages/getValues.html',
            controller  : 'detailsController'
        });
});

App.controller('mainController', function($scope) {

        $scope.message = 'This is Home page';
    });

    App.controller('valuesController', function($scope) {
        $scope.message = 'This is Values';
    });

上面的我的控制器基本上取用户输入的值并通过jaxb运行它，并根据用户输入的值解组其余的api。

尝试

1）如果我有这个控制器和我的角度js路线同时运行，我要么得不到部分视图或错误404.

2）如果我删除了我的控制器，我有部分视图，但没有来自sql或jaxb unmarshalling的值。

3）尝试从ModelAndView切换到模型（仅用于在页面上呈现数据）。仍然给我错误，页面无法加载。

Simliar post

Answer 1

以下是Angular JS 1和Spring通信时最常用的方法之一。

同样聪明的人使用不同的方法/味道。

我建议您尝试以下方式

首先使用注释 @RestController 创建新控制器，然后使用正确的HTTP方法进行正确操作，在此处详细查找 Rest Maturity模型 https://martinfowler.com/articles/richardsonMaturityModel.html ;

package com.mycompany.userinfo.controller;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.HttpHeaders;
import org.springframework.http.HttpStatus;
import org.springframework.http.MediaType;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.util.UriComponentsBuilder;

import com.mycompany.userinfo.model.User;
import com.mycompany.userinfoc.service.UserService;

@RestController
public class UserRestController {

    @Autowired
    UserService userService;  //Service which will do all data retrieval/manipulation work


    //-------------------Retrieve All Users--------------------------------------------------------

    @RequestMapping(value = "/user/", method = RequestMethod.GET)
    public ResponseEntity<List<User>> listAllUsers() {
        List<User> users = userService.findAllUsers();
        if(users.isEmpty()){
            return new ResponseEntity<List<User>>(HttpStatus.NO_CONTENT);//You many decide to return HttpStatus.NOT_FOUND
        }
        return new ResponseEntity<List<User>>(users, HttpStatus.OK);
    }


}

然后客户端创建Angular Service（最好是用于后端调用，在不同组件之间共享数据），以便使用角度HTTP服务调用Back end Spring控制器方法，如下所示

user.service.js
'use strict';

angular.module('myApp').factory('UserService', ['$http', '$q', function($http, $q){

    var REST_SERVICE_URI = 'http://localhost:8080/UserBackend/user/';

    var factory = {
        fetchAllUsers: fetchAllUsers
      };
    return factory;

    function fetchAllUsers() {
        var deferred = $q.defer();
        $http.get(REST_SERVICE_URI)
            .then(
            function (response) {
                deferred.resolve(response.data);
            },
            function(errResponse){
                console.error('Error while fetching Users');
                deferred.reject(errResponse);
            }
        );
        return deferred.promise;
    }

}

然后终于来了你的角度控制器（根据视图创建它被破坏，它与你的html模板紧密耦合，所以理想情况下从来没有任何来自这个控制器的直接后端调用，使用角度服务）

user.controller.js

'use strict';

angular.module('myApp').controller('UserController', ['$scope', 'UserService', function($scope, UserService) {
    var self = this;
    self.users=[];          

    fetchAllUsers();

    function fetchAllUsers(){
        UserService.fetchAllUsers()
            .then(
            function(d) {
                self.users = d;
            },
            function(errResponse){
                console.error('Error while fetching Users');
            }
        );
    }

}]);

1）Spring Controller和angular JS控制器没有任何关系。

2）在RequestMapping（“/ user /”）中定义一些内容时，那么执行该方法的URL就像这个http://yourdomain.com或localhost：port / applicationname / user /

3）从Angular JS中获取该URL，您需要使用如下所示的http服务

$http.get("http://yourdomain or localhost:port/appname/user/")
            .then(sucessFunction(data){
            //This is callback function, a asynchronous call
            //This will get called on success of http request
        },
        failureFunction(error){
            //This is callback function, a asynchronous call
            //This will get called on failure of http request
        });
Read more about anguls js service , http service and promise.

我强烈建议您通过文档或角度js培训。

希望这可以帮助你并清除你的疑虑。

可以角度接管java控制器功能吗？

1 个答案: