Apress.Full.Stack.AngularJS.for.Java.Developers.148423197X.pdf

CHAPTER 3 ■ SETTING UP ANGULARJS: CREATING YOUR SINGLE-PAGE APPLICATION

 

}).otherwise({ redirectTo : '/home', templateUrl : '/template/home.html', });

}); Then, in app.config , each route is mapped to a template and controller (optional). •

•

•

The controller listUserController  will be called when you navigate to the URL / list-all-users . The controller registerUserController  will be called when you navigate to the URL /register-new-user . The controller usersDetailsController  will be called when you navigate to the URL /update-user/:id .

In this section, you have created the app application in the app.js  file. Let’s create three different controllers named listUserController , registerUserController , and usersDetailsController  in the next section.

Create an AngularJS Controller The controller.js  file defined in the src/main/resources/static/js  folder contains the implementation of AngularJS controllers. Let’s create an AngularJS controller module named registerUserController  that will consume the Spring REST service to perform the POST HTTP call. Here, an errorMessage  is set in $scope  to display as an error message returned from the POST call to the server on the Register New User page. On a successful POST call, it  will redirect redirect to list-all-users . See Listing 3-13 3-13..  Listing 3-13. registerUserController in src/main/resources/static/js.controller.js

app.controller('registerUserController', function($scope, $http, $location, $route) {  

   

$scope.submitUserForm = function() { $http({ method : 'POST', url : 'http://localhost:8080 'http://localhost:8080/api/user/', /api/user/', data : $scope.user, }).then(function(response) }).then(function(resp onse) { $location.path("/list-all-users"); $route.reload(); }, function(errResponse) { $scope.errorMessage = errResponse.data.erro errResponse.data.errorMessage; rMessage; }); } $scope.resetForm = function() { $scope.user = null; };

});

84