0
ユーザー入力によって生成されたページに単語のリストを表示するために使用したいHipsterアプリケーションがあります。例：ユーザーが文字列 'ba'を入力すると、アプリケーションは 'ba'で始まるローカルデータ構造内にあるすべての単語のリストを生成します。私が理解しようとしているのは、文字列をサーバーに戻してリストを返す方法です。それは$scope変数のためですか？残りのエンドポイントからのオブジェクトのリストを表示するAngularJS？
@RestController
@RequestMapping("/api")
public class WordResource {
private final Logger log = LoggerFactory.getLogger(WordResource.class);
@Inject
private TreeService treeService;
/**
* GET /words : get all the words.
*
* @return the ResponseEntity with status 200 (OK) and the list of words in body
*/
@RequestMapping(value = "/words",
method = RequestMethod.GET,
produces = MediaType.APPLICATION_JSON_VALUE)
@Timed
public List<Word> getAllWords() {
log.debug("REST request to get all Words");
return treeService.getAllWords();
}
/**
* GET /words : get all the words.
*
* @return the ResponseEntity with status 200 (OK) and the list of words in body
*/
@RequestMapping(value = "/ten-words",
method = RequestMethod.GET,
produces = MediaType.APPLICATION_JSON_VALUE)
@Timed
public List<Word> getSubWords(@PathVariable String word) {
log.debug("REST request to get all Words");
return treeService.getTenWordsFrom(word);
}
}
HTML
<div ng-cloak>
<!DOCTYPE html>
<html lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"/>
<!--/*@thymesVar id="pageTitle" type=""*/-->
<title th:text="${pageTitle}">title placeholder</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="https://bootswatch.com/superhero/bootstrap.min.css"/>
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
</head>
<body>
<form>
<div class="form-group">
<input type="text" name="searchStr" class="form-control" placeholder="Search Words..."/>
</div>
</form>
<div class="row well">
<div class="col-md-4">
<!--word list goes here-->
</div>
</div>
</body>
</html>
</div>
コントローラー：
(function() {
'use strict';
angular
.module('treeWordsApp')
.controller('HomeController', HomeController);
HomeController.$inject = ['$scope', 'Principal', 'LoginService', '$state'];
function HomeController ($scope, Principal, LoginService, $state) {
var vm = this;
vm.account = null;
vm.isAuthenticated = null;
vm.login = LoginService.open;
vm.register = register;
$scope ({
});
}
})();
RestControllerを結合2ウェイデータを実装する方法だと思います