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

我手动设置了所有这些，当应用程序启动时，spring boot会显示index.html页面，其中有一个AngularJS

我的配置文件在AngularJS项目中可以正常工作，但现在我正在尝试从restful服务中获取信息，并且似乎不再调用它们。几乎在它被传递到index.html之后，angular就占据了控制权

indexController.java

@RestController
public class IndexController {

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

}

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

FormRestController.java

@RestController
public class IndexController {

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

}

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

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>

身份证件
名称
地址
电子邮件
{{u.id}}
{{u.username}
{{u.address}}
{{u.email}

home.html（这是根页面）

你已经登陆主页了！！！

输出

---

您听到的问题是，

此

不是在ui中打开数据的正确指针。这是因为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”或“no”，那么当在函数中使用此函数以一种特定的方式工作时，记住函数是javascript中的对象，即使您编写函数js引擎将函数作为对象和主函数（mani对象）的此引用对于一个内部函数（其他对象）的这一点是不同的

典型的解决办法是： 因为您不能在内部函数中使用外部函数的

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

---

我希望我在answare中说得很清楚，这可以帮助您。

这并不是您所认为的promise回调中的内容。存储对
此
的引用并使用该引用我按照您所说的做了，现在仍在工作。一旦我看到所有的工作，我知道它会点击。这是我第一次用手把它连接起来。注d.数据不是未解析变量。在您的示例中，“self”看起来也是“this”。你只是在传递“这个”。不过，我有点理解你指的是什么。如果你想看这个项目，它就在GIT上。但是我很确定，如果你真的把itok拉过来的话，你将不得不（npm安装）在它的路径上。我分叉了你的项目，并试图在原始代码中解决这个问题。我很抱歉，但我在构建你的项目时遇到了很多问题，但我已经实现了一个poc，并且适用于我的示例，事实上，我忘了在我的answare中添加ng init，但我在另一个answare中发布了它。如果可以帮助我在我的github中使用Angular，如果你想查看我的帐户，我可以建议你查看PhoneBoock谢谢你的努力。是的，此项目确实需要在IDE上进行一些配置。您必须进行npm安装，并确保bower_组件位于webapp/app/bower_组件下。我看了你的项目，它似乎是SpringMVC，我正在使用SpringBoot。
<!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>

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