Службы RESTful с Spring-boot не используются при внедрении AngularJS

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 не является правильным указатель для popolate данных в пользовательском интерфейсе. это потому, что 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, уважение к тому, если вы используете «использовать строгий» или нет, при использовании этого функция работает ина partucular способ запомнить тха функции являются объекты JavaScript, даже если вы пишете функцию js engine tract - функция как объект, и эта ссылка основной функции (объекта mani) отличается от внутренней функции (на другом объекте).

обходной путь типичный услышать, что: Becouse вы не может использовать this внешней функции во внутренней функции вы создаете ссылку в этом случае вы througth ссылки ранее построенную может ссылаться на внешнее это во внутреннем funciotn ,

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

} 

возобновлением я отправляю весь код в моем РОС для Validate, что я написано:

конфигурация контекст был:

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

Я надеюсь, что я был ясно в своем answare, и это может вам помочь.