Developing a web API with SPRING and ANGULAR.JS (Part 3)

In this series we look at how to develop a web API using Spring and then accessing it using a Angulat.JS frontend. In part 1 we set up the backend application, in part 2 we added some simple functionality to the API. In this part we will finally start with the frontend. So let’s dive right into it.

First let us look at how we are going to structure our application.

Application-Structure

As we can see the application consist of JS modules an Application JS and some template files. The index.html will tie or application together, and the Application.js will set up the actual Angular.JS application. Each modules has its own set of JS files and views. This way we can nicely separate all the logic and views. Things will hopefully become a little bit clearer when we start coding the individual files.

Let’s start by putting together our starting page:

Basically all it does is include some JS files. The important part is in line 2 where we define which Angular Application we want this page to use. In our case this will be MyApp. In line 12 we define an ng-view. This is where the actual content will be rendered. In Lines 29-40 we include our JS files. Notice that all index files must be included first, because that is where we will define our controllers and services.

We now need to define our Angular Application. For that we add following code to the Application.js file.

We now need to define our Angular Application. For that we add following code to the Application.js file.  In lines 1-3 we define our main application called MyApp. We additionally define the app to require ‘ngRout’ for routing, ‘ngMaterial’ for styling support and ‘ngMessages’ for displaying message sin our application.

In lines 6-14 we define our first route. This tells angular that if the root of our application is loaded, it should display the start.html. And finally in lines 16-20 we configure our theme colours primary and accent for different roles in our UI elements.

If we now add a greeting message to our start.html

and fill our header.html and footer.html

we should see something similar to:

screen-start-1

Notice: You will have to run this application within a server. For a quick start use XAMPP

So now let create our first moduel. this module will handle all the logic linked to user management.

In the index.js of the user module (js/modules/user/index.js) we add following code

What this does, is it defines the module MyApp.User and also specifies that it requires the MyApp.User.Controller and MyApp.User.Services, which we still have to create. Additionally it defines a new route to /user/all. Notice this corresponds to the URL (#/user/all) we entered in the header.html

Next we need to create our userManagementController, this happens in 2 steps. In js/modules/user/controllers.index.js we define the controllers and add the user.Services as dependencies. And the in userManagementController we add the actual logic.

js/modules/user/controllers/index.js:

js/modules/user/controllers/userManagementController .js:

Here we create the controller and add one simple method. This method calls a function within the userService, and uses the ‘q’ service (more details here) to work with asynchronous function calls. Basically userService.getAllUsers  returns an object wich ‘promises’ to return a resource (user list in our case). We can then wait for that promise and react to its result. This can be success, an error or an update statement, which tells the module that something in the process has changed (e.g. status of a download). In our case we store the result list in our own user list $scope.users  or store an error message in $scope.error .

Next we need to define and create our userService. For this we need to define it in js/modules/user/services/index.js and implement it in js/modules/user/services/UserService.js

js/modules/user/services/index.js:

js/modules/user/services/UserService.js:

Here we finally start to communicate with our backend. As defined in part 2 we make a GET request to /api/search/users/all and we store the result to our $q object.

Here we use an external library which provides us with a filer and pagination support. You can find details to this library here.

So to finish we need to tie it all together. In index.html add the pagination.js

And in Application.js add the dependency Myapp.User and angularUtils.directives.dirPagination. And configure the pagination library. The final Application.js should look like this:

For the application to work we need to configure our apache server to support ProxyPass so add following lines to your httpd.conf file and start you backend API.  Make sure that the module mod_proxy_ajp.so is enabled. This will pass all incoming requests that are directed to /api to our tomcat server responsible for the backend,

As we have secured the resource in the backend, add this line to your security configuration of the API for temporary testing purposes:

When navigating to http://localhost:7000/#/user/all you should now see something like this:

user-list

We already added the edit and delete buttons, however they currently have no functionality. The pagination library has provided us with a nice way of working with long lists by adding pagination and filtering functionality. Try adding more users until you reach +10 users, the pagination commands will be displayed when required.

So by the end of this part 3 we have created a simple backend application that serves us an API. We have created a frontend application with Angular which communicates with the API to display us a nice list of Users. Next time we will focus on the login process so we can activate our security again.

 

Tagged with: , , , ,

Leave a Reply

Your email address will not be published. Required fields are marked *

*

twenty − fifteen =

*