This guide walks you through writing a simple AngularJS customer that consumes a Spring MVC-based RESTful web service.

What yous'll build

You volition build an AngularJS client that consumes a Bound-based RESTful spider web service. Specifically, the customer volition eat the service created in Building a RESTful Web Service with CORS.

The AngularJS client will be accessed past opening the index.html file in your browser, and will consume the service accepting requests at:

http://residue-service.guides.leap.io/greeting

The service will answer with a JSON representation of a greeting:

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

The AngularJS client will render the ID and content into the DOM.

The service at rest-service.guides.spring.io is running the lawmaking from the CORS guide with small-scale modifications: in that location is open up access to the /greeting endpoint because the app is using @CrossOrigin with no domain.

What you'll demand

  • About xv minutes

  • A favorite text editor

  • A modern spider web browser

  • An cyberspace connection

Create an AngularJS Controller

Get-go, you will create the AngularJS controller module that will consume the Residuum service:

public/hello.js 

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

This controller module is represented as a unproblematic JavaScript role that is given AngularJS's $scope and $http components. It uses the $http component to consume the Residue service at "/greeting".

If successful, it volition assign the JSON returned back from the service to $scope.greeting, effectively setting a model object named "greeting". By setting that model object, AngularJS can bind it to the application page's DOM, rendering information technology for the user to see.

Create the Application Page

At present that you have an AngularJS controller, y'all volition create the HTML page that will load the controller into the user's web browser:

public/index.html 

                <!doctype html> <html ng-app="demo"> 	<caput> 		<title>Hello AngularJS</championship> 		<script src="https://ajax.googleapis.com/ajax/libs/angularjs/one.four.three/athwart.min.js"></script>     	<script src="hi.js"></script> 	</head>  	<torso> 		<div ng-controller="Hello"> 			<p>The ID is {{greeting.id}}</p> 			<p>The content is {{greeting.content}}</p> 		</div> 	</body> </html>

Annotation the post-obit 2 script tags within the head section.

                <script src="https://ajax.googleapis.com/ajax/libs/angularjs/i.four.iii/angular.min.js"></script> <script src="hullo.js"></script>

The first script tag loads the minified AngularJS library (angular.min.js) from a content delivery network (CDN) so that y'all don't accept to download AngularJS and place it in your projection. It as well loads the controller lawmaking (hi.js) from the awarding'southward path.

The AngularJS library enables several custom attributes for use with standard HTML tags. In index.html, two such attributes are in play:

  • The <html> tag has the ng-app attribute to betoken that this page is an AngularJS application.

  • The <div> tag has the ng-controller attribute set to reference Howdy, the controller module.

Also note the two <p> tags which use placeholders (identified past double-curly-braces).

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

The placeholders reference the id and content properties of the greeting model object which will be set upon successfully consuming the REST service.

Run the client

To run the client, yous'll need to serve it from a web server to your browser. The Leap Kicking CLI (Command Line Interface) includes an embedded Tomcat server, which offers a simple approach to serving web content. Come across Building an Application with Spring Boot for more information almost installing and using the CLI.

In order to serve static content from Spring Boot's embedded Tomcat server, you lot'll also need to create a minimal corporeality of spider web application code and then that Spring Boot knows to outset Tomcat. The following app.groovy script is sufficient for letting Bound Boot know that you desire to run Tomcat:

app.groovy 

                @Controller class JsApp { }

You can now run the app using the Leap Boot CLI:

Model data retrieved from the REST service is rendered into the DOM.

The ID value will increment each time yous refresh the folio.

Summary

Congratulations! You've but developed an AngularJS client that consumes a Bound-based RESTful web service.

Meet Likewise