I have a Hipster application that I am wanting to use to display a list of words on a page generated by user input. Ex. a user enters the string 'ba' and the application generates a list of all words that are in a local data structure that begin with 'ba'. What I am trying to figure out is how to pass the string back to the server and return a list. is that what the $scope variable is for? I think what I am trying to figure out is how to implement 2-way data binding...
RestController:
@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>
Controller:
(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 ({
});
}
})();
