Tying AngularJS front-end into back-end service

Previously, we added AngularJS Material to our web application. This made things look a little nicer. We’ll start tying into the back-end server in this post. Before we begin, you’ll want to start the “to do” back-end server.

The first thing we’ll want to do in our web application is to fetch the list of entries from our server. In order to do this, we’ll need to make an HTTP request to our server. AngularJS provides a service that will make HTTP calls for you. In order to use it, we’ll need to inject the “$http” service into our controller. Go ahead and change the controller function definition in home.component.js to look like:

var controller = function($scope, $http) {

The $http service provides a method for each of the different HTTP method types. Each of these methods returns a promise that allows you to “attach” code to the success or failure conditions of the request. The first one we’ll cover is the “get” method. Go ahead and add the following method to the controller:

$scope.refresh = function() {
	$http.get("http://localhost:8080/todo").then(function(response) {
		$scope.data = response.data;
		console.log($scope.data);
	}, function(error) {
		console.log("$scope.refresh() - caught error: ", error);
	});
};

Next, we will want to call this in the “this.$onInit” function, so go ahead and change that to:

this.$onInit = function() {
    $scope.refresh();
}

When the controller is first initialized it’s going to call out to our server, fetch the list of to do entries, and print them to the developer console. Right now there’s no way to add anything. So if you run it, it will just display an empty array.

Let’s change this by adding the following code to the $scope.onClickAdd method:

$scope.onClickAdd = function() {
	var data = { description: $scope.newDescription };
	$http.post("http://localhost:8080/todo", data).then((function(response) {
		$scope.refresh();
		$scope.newDescription = "";
	}));
}

Now, any time we add a new item we’ll issue a POST request to the server with the text from our input field as part of the payload. This will add it to the list of to do entries. Once that request has returned to the client, we’ll then call $scope.refresh which fetches the list from the server. Open up your browser and try adding something. You should see something similar to the following:

Let’s now render the data to the screen. We’ll make use of something called a “card” which is part of Material. Open your home.html and add the following in place of the comment:

<div layout="row" layout-wrap>
	<md-card ng-repeat="item in data">
		<md-card-title>
			{{item.description}}
		</md-card-title>
		<md-card-actions>
			<md-button ng-click="onClickRemove(item)">Remove</md-button>
			<md-button ng-click="onClickUpdate(item)">Update</md-button>
		</md-card-actions>
	</md-card>
</div>

There’s a lot going on here.

First, we’re defining a “row” layout and that it will wrap to the next line if the content extends past the edge of the screen. Next, we’re generating a card layout for each entry in the “data” array found in the controller. The “md-card-title” snippet creates a nice big heading for us to see. The “md-card-actions” snippet creates buttons at the bottom of the card for us to interact with. We don’t have these methods defined yet, but we will in the next post.

Go ahead and refresh your browser. You should now see something similar to:

That’s it for this post. In the next we’ll wrap up the AngularJS front-end.

Source code to the entire series is available here: