Java 使用AngularJS显示弹簧静止数据_Java_Angularjs_Spring_Spring Mvc

Java 使用AngularJS显示弹簧静止数据

java angularjs spring spring-mvc

Java 使用AngularJS显示弹簧静止数据,java,angularjs,spring,spring-mvc,Java,Angularjs,Spring,Spring Mvc,我想用Java Spring后端和AngularJS前端开发一个博客系统。我写下了API，但我不知道如何使用AngularJS使用它们。这是我的API代码 package app.com.example; import java.util.HashSet; import java.util.Iterator; import java.util.Set; ..... .... import app.com.example.UserRepository; import app.com.examp

我想用Java Spring后端和AngularJS前端开发一个博客系统。我写下了API，但我不知道如何使用AngularJS使用它们。这是我的API代码

package app.com.example;

import java.util.HashSet;
import java.util.Iterator;
import java.util.Set;
.....
....
import app.com.example.UserRepository;
import app.com.example.CommentRepository;
import app.model.Article;
import app.model.Comment;
import app.model.User;

@RestController
public class UserApi {
    @Autowired
    UserRepository repository;
    @Autowired
    ArticleRepository articleRepository;
    @Autowired
    CommentRepository commentRepository;
....
....
@RequestMapping(value="/getarticles")
    public String getarticles(Model model) {
        String response = "{ \"articles\":";
        Iterator <Article> iterator =articleRepository.findAll().iterator();
        while (iterator.hasNext()){
            Article article=iterator.next();
            String s=article.toString();
            response=response+s;
            System.out.println(s+" naber "+response);
            if(iterator.hasNext())
                response=response.concat(",");
        }

        response=response.concat("}");
        model.addAttribute("articles",response);
        return response;
    }
....
}}

我写了一些简单的AngularJS代码

'use strict';

var myApp = angular.module('myApp', []);
myApp.controller('myCtrl', function($scope, $http) {
    $scope.test='this is a test';
    $http.get("http://localhost:8080/getarticles")
    .then(function(response) {
        $scope.articles = response.data;
    },
    function(errResponse){
            console.error('Error while fetching Users');
            deferred.reject(errResponse);
            $scope.error='error getting'
    });
});

使用home.html文件

<!doctype html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="utf-8">
    <title>Google Phone Gallery</title>
    <script src="angular.min.js"></script>
    <script src="app.js"></script>
    <script src="angular-resource.min.js"></script>
 </head>

<body ng-controller="myCtrl"> 

<h1>{{naber}}</h1>
<h1>a line</h1>
<h1>{{articles}}</h1>
<h1>a line2</h1>
<div ng-repeat="article in articles">{{article.text}} {{article.author}}</div>

</body>
</html>

如何从SpringREST获取数据并用angularJS代码显示它？

您的控制器实际上不是一个REST控制器。首先，不要手动创建JSON——有数百万个工具可以为您完成这项工作。Spring合并了一些现成的（faxterxml）。只需返回您的文章集合，并让spring将其序列化为json。您的控制器应如下所示：

@RequestMapping(value="/getarticles")
public List<Article> getarticles() {
    return articleRepository.findall();
}

如果您只更改AngularJS代码，那么您的示例将在不更改Spring代码的情况下工作。不过，我强烈建议您也要更改Spring代码，因为它的代码真的很臭。

谢谢，现在它工作了。我不熟悉这个话题，我找不到有用的例子，所以我可以做一些大文章mistakes@arslanbenzer我很乐意帮忙。你可以在Spring官方网站Spring.io上找到很多很好的例子。他们还提供了很多github示例。务必首先在这里找到合适的指南：（定期更新）。然后，按照他们的指南在他们的官方github存储库中查找工作示例：。

this is a test

a line

a line2

@RequestMapping(value="/getarticles")
public List<Article> getarticles() {
    return articleRepository.findall();
}

$http.get("http://localhost:8080/getarticles")
.then(function(response) {
    // response.data return objects with articles property
    $scope.articles = response.data.articles;
}