Wrapping up the AngularJS To do front-end

In the previous article, we began connecting the front-end to the back-end service. In the web app, we can now see and create “to do” items. In this article, we’ll cover removing and updating. Go ahead and start your back-end and front-end servers.

Next, we’ll create the remove logic. Open home.component.js and add the following method to the controller:

$scope.onClickRemove = function(item) {
    $http.delete("http://localhost:8080/todo/" + item.id).then(function(response) {
        $scope.refresh();
    });
}

If you refresh your UI then click remove on an entry you should see it disappear.

Next, we’ll add the logic to update our entry. First, we’ll need to inject a new service, “$mdDialog”, into our controller. Change the definition of the controller function to:

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

Now, add the following function at the end of the controller:

$scope.onClickUpdate = function(item) {
	var dialog = $mdDialog.prompt()
		.title("Update entry")
		.textContent('Description')
		.placeholder('Description')
		.initialValue(item.description)
		.required(true)
		.ok('Update')
		.cancel("Cancel");

	$mdDialog.show(dialog).then(function(newDescription) {
		var newData = { description: newDescription };
		$http.put("http://localhost:8080/todo/" + item.id, newData).then(function() {
			$scope.refresh();
		});
	}).catch(function() {
		console.log("User clicked cancel!");
	});
}

Here, we use the $mdDialog service to set up a dialog object and then we show it. The show function returns a promise that succeeds if the user clicked ok and rejects if the user clicked cancel. Since we used the prompt dialog, we’ll also receive the text that was entered. There are a variety of other dialog options to choose from.

If the user clicked okay, we’ll create our new “to do” object that we’ll then send to the server for an update. Assuming that call is successful, we’ll refresh the screen to show the change. if the user clicked cancel, then we do nothing except log the message to the developer console.

Go ahead and refresh your browser again and try it out. You should see the following when you click the “Update” button on an item:

That’s all we’re going to cover in these articles. We’ve written both a back-end REST service and front-end web client. Granted, they were both very simple, but they lay a foundation that can be built upon in the future.

Before this is completely wrapped up, I wanted to take a moment to write about these AngularJS articles. Ideally, if you were building a larger web application using AngularJS, you would break the home component out a bit. For instance, instead of calling the $http service directly in the component, you’d probably want to create a service layer that does that for you. The reason for this is to fulfill the “separation of concerns”. The controller just really needs data, it doesn’t care how it gets it. By moving the $http calls into a separate service, you’re splitting the “concern” of fetching the data into another part of the project. Having said that, if you were starting a new web application from scratch, you would probably want to use the newer Angular framework instead which has gained widespread support.

Anyway, this concludes the AngularJS front-end series. Thanks for reading!

Source code to the entire series is available here: