实现AngularJS时未使用Spring-boot RESTful服务

Question

我手动进行了所有设置，当应用程序启动时，spring-boot会显示index.html页面，其中包含AngularJS <div ng-view></div>我的配置文件确实可以在我的AngularJS项目中正常工作。从我的安心服务中获取信息，似乎不再被调用。 一旦将其传递给index.html，就可以控制角度。

indexController.java

@RestController
public class IndexController {

    @RequestMapping("/")
    public String index(){
        System.out.println("Looking in the index controller.........");
        return "index";
    }

}

FormRestController.java

@RestController
public class FormRestController {

    @Autowired
    UserService userService;

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

    @RequestMapping(value = "/getUsers", method = RequestMethod.GET)
    public ResponseEntity<List<User>> listAllUsers() {

        System.out.println("listAllUsers() is being called inside RestController............");

        List<User> users = userService.findAllUsers();
        if(users.isEmpty()){
            return new ResponseEntity<List<User>>(HttpStatus.NOT_FOUND);
        }
        return new ResponseEntity<List<User>>(users, HttpStatus.OK);
    }

users.config.js

angular.module('myApp')
    .config(['$routeProvider', function ($routeProvider){

        $routeProvider.when('/users', {
            templateUrl: 'app/scripts/Customers/users.html',
            controller: 'UsersController'
        }).otherwise({redirectTo:'/'});

    }]);

usersService.js

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

return {

    fetchAllUsers: function(){
        console.log("inside fetchAllUsers");
        return $http.get('/getUsers')
            .then(
                function(response){
                    return response;
                },
                function(errResponse){
                    console.error("Error while fetching customers"+errResponse);
                    return $q.reject(errResponse);
                }
            );
    }
}

}]）;

users.controller.js

angular.module('myApp')
.controller('UsersController', ['$scope', 'usersService', function($scope,    
usersService){

this.user = {id:null, username:'', address:'',email:''};
this.users = [];

var self = this;

this.fetchAllUsers = function(){
    var usersSelf = self;

    usersService.fetchAllUsers()
        .then(
            function(d){
                usersSelf.users = d
            },
            function(errResponse){
                console.error("Error while catching something"+errResponse);
            }
        );
}
}]);

users.html

<div ng-controller="UsersController as ctrl">

      <table class="table table-hover" ng-init="ctrl.fetchAllUsers()">
          <thead>
          <tr>
              <th>ID.</th>
              <th>Name</th>
              <th>Address</th>
              <th>Email</th>
              <th width="20%"></th>
          </tr>
          </thead>
          <tbody>
          <tr ng-repeat="u in ctrl.users">
              <td>{{u.id}}</td>
              <td>{{u.username}}</td>
              <td>{{u.address}}</td>
              <td>{{u.email}}</td>
          </tr>
          </tbody>
      </table>

home.html（这是根页面）

<div>
    <h2>You have landed on the home page!!!</h2>

    <a ng-href="#/users">Click here to go to the next page...</a>

</div>

输出

Answer 1

您所听到的问题是， this不是在用户界面中填充数据的正确指针。 这是因为javascript与Java和其他编程语言的区别。

如果有这么小的更改，您的代码应该可以工作。

controller( "" , ... 

 this.user = {};
        this.users = [];
        var self = this;

        this.fetchAllUsers = function(){
            var uresSelf = self;

            usersService.fetchAllUsers()
                .then(
                function(d){
                    uresSelf.users = d.data
                },
                function(errResponse){
                    console.error("Error while catching something");
                }
            );
        }

关键是javascript如何尊重事实，如果您使用“ use strict”或不使用，则在函数中以特殊方式使用此函数时，请记住，即使您将函数js引擎写成一个函数，该函数也是javascript中的对象对象和主函数（mani对象）的this引用与内部函数（另一个对象）的this有所不同。

常见的解决方法是：因为您不能以this方式在内部函数中使用外部函数的this ，所以您以前构建的引用可以在内部函数中引用外部的this。

function outerFunction(){

 var outerThis = this;

  function innerFunction(){
     console.log("this the this of the outer function" + outerThis );
     console.log("this the this of the inner function" + this);  
 }();

}

继续发布我poc的所有代码以验证我写的内容：

上下文配置为：

@SpringBootApplication
public class DemoApplication {

    public static void main(String[] args) {
        SpringApplication.run(DemoApplication.class, args);
    }
}
@RestController
class FormRestController {

    @Autowired
    UserService userService;

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

    @RequestMapping(value = "/users", method = RequestMethod.GET)
    public ResponseEntity<List<User>> listAllUsers() {

        System.out.println("listAllUsers() is being called inside RestController............");

        List<User> users = userService.findAllUsers();
        if (users.isEmpty()) {
            return new ResponseEntity<>(HttpStatus.NOT_FOUND);
        }
        return new ResponseEntity<>(users, HttpStatus.OK);
    }
}

@Data
@Builder
class User{

    private long id;
    private String username;
    private String address;
    private String email;
}

@Service
class UserService {

    public List<User> findAllUsers(){
        List<User> users = new ArrayList<>();

        users.add(User.builder().id(1).username("valerio").address("via sessa aurunca").email("v.vòg.v").build());
        users.add(User.builder().id(2).username("valerio1").address("via sessa aurunca").email("v.vòg.v").build());
        users.add(User.builder().id(3).username("valerio2").address("via sessa aurunca").email("v.vòg.v").build());
        users.add(User.builder().id(4).username("valerio3").address("via sessa aurunca").email("v.vòg.v").build());
        users.add(User.builder().id(5).username("valerio4").address("via sessa aurunca").email("v.vòg.v").build());

        return users;
    }
}

htmo文件为：

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title></title>


</head>
<body>
<div ng-controller="UsersController as ctrl">

    <table class="table table-hover" ng-init="ctrl.fetchAllUsers()">
        <thead>
        <tr>
            <th>ID.</th>
            <th>Name</th>
            <th>Address</th>
            <th>Email</th>
            <th width="20%"></th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="u in ctrl.users">
            <td>{{u.id}}</td>
            <td>{{u.username}}</td>
            <td>{{u.address}}</td>
            <td>{{u.email}}</td>
        </tr>
        </tbody>
    </table>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="main.js"></script>
</body>
</html>

js文件是：

angular.module('myApp',[])
    .factory('usersService',['$http', '$q', function($http,$q){
        return {


            fetchAllUsers: function(){
                return $http.get('http://localhost:8080/users')
                    .then(
                    function(response){
                        return response;
                    },
                    function(errResponse){
                        console.error("Error while fetching customers");
                        return $q.reject(errResponse);
                    }
                );
            }
        }

    }]).controller('UsersController', function($scope, usersService){

        this.user = {};
        this.users = [];
        var self = this;

        this.fetchAllUsers = function(){
            var uresSelf = self;

            usersService.fetchAllUsers()
                .then(
                function(d){
                    uresSelf.users = d.data
                },
                function(errResponse){
                    console.error("Error while catching something");
                }
            );
        }
    });

我希望我清楚知道该如何做，可以为您提供帮助。