SpringBoot 2 RESTful Web services and AngularJS

The opening words

The guide will lead you to write a simple AngularJS client, the client uses Spring MVC-based RESTful Web services .

Your application will be created

We will build a client using AngularJS Spring-based RESTful Web services. Specifically, the client will consume use CQRS building RESTful Web services (please do look forward ~) service created.

Can open in a browser index.htmlto access client files AngularJS, and will use the service accepts the request at the following locations:

http://rest-service.guides.spring.io/greeting

The service will JSON representation of greetings to respond:

{"id":1,"content":"Hello, World!"}

AngularJS client ID and the content will be rendered to the DOM.

Services running on rest-service.guides.spring.io CORS Guide (please do look forward ~) code and made some minor changes: Because the / app using @CrossOriginno domain name, making it possible /greetingendpoints open access.

Creating AngularJS controller

First, we will create will use the REST services AngularJS controller module:
public/hello.js

angular.module('demo', [])
.controller('Hello', function($scope, $http) {
    $http.get('http://rest-service.guides.spring.io/greeting').
        then(function(response) {
            $scope.greeting = response.data;
        });
});

The controller module is represented as a simple JavaScript function, which provides the AngularJS $scopeand $httpcomponents. It uses the $httpcomponents to consumer / greeting provided by the REST service.

If successful, it will return JSON from the server assigned to $scope.greeting, effectively set the model object named "greeting" of. By providing the model object, AngularJS can be bound to the DOM application page to be presented to the user for viewing.

Create an application page

Now we have AngularJS controller, we will create an HTML page that will be loaded into the controller user's browser:
publix/index.html

<!doctype html>
<html ng-app="demo">
	<head>
		<title>Hello AngularJS</title>
		<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
    	<script src="hello.js"></script>
	</head>

	<body>
		<div ng-controller="Hello">
			<p>The ID is {{greeting.id}}</p>
			<p>The content is {{greeting.content}}</p>
		</div>
	</body>
</html>

Please note headthe following two sections of the script part.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script src="hello.js"></script>

The first script tag to load the production version of the AngularJS library (from a content delivery network (CDN) angular.min.js ), so we do not need to download AngularJS and place it in the project. It also load the controller codes (the path from the application hello.js ).

AngularJS library enabled several custom attributes for standard HTML tags. In the index.html, two such work properties:

<html>Tag having a ng-appproperty to indicate that the page is AngularJS application;
<div>Tag ng-controllerproperty to the application controller module Hello.

Also note the use of two placeholder <p>tags (identification by the two curly braces).

<p>The ID is {{greeting.id}}</p>
<p>The content is {{greeting.content}}</p>

Placeholder references the greetingmodel objects idand contentattributes that will be set at the time of a successful consumer REST service.

Run the client

To run the client, we need to provide it to the server browser. Spring Boot CLI (Command Line Interface) includes an embedded Tomcat server, provides an easy way to provide Web content. For more information about installing and using the CLI, see Use Spring Boot to build applications .

In order to provide static content from Spring Boot embedded Tomcat server, we also need to create a minimal Web application code to Spring Boot up how to start Tomcat. The following app.groovyscript is enough to make Spring Boot know you want to run Tomcat:
app.groovy

@Controller class JsApp { }

We can now use Spring Boot CLI run the application:

spring run app.groovy

After the application is started, visit your browser HTTP: // localhost: 8080 , where we will see:

every time you refresh the page, ID straight will increase.

Outline

Congratulations! We have just developed a consumer Spring-based RESTful Web services AngularJS client.