Example 3: Restful API Running with AngularJS Web CRUD UI

You can download the Web UI here, extract the zip file as folder “AngularUI”. As we will run the Node.js Restful API with port 3000, and Web UI using Tomcat with port 8080.

Assuming you have installed Tomcat. Otherwise, please download and install Tomcat from http://tomcat.apache.org/download-80.cgi . Then, store the unzip package “AngularUI” under {your_tomcat_installed_path}\webapps\ . You can find CRUD operations from this web UI, which is based on below JS libraries.

JS Libraries Details
angular.min.js Core Angular library


For the menu
angular-resource.js With $resource, it is using to make the HTTP request to Restful server
angular-ui-router.min.js It helps to map the URL, view and controller together, you can find more details from app.js file.
angular-material.min.js Powerful Angular UI library
app.js Contains the mapping of URLs, views and controllers
controllers.js Contains the controllers and their related functions
services.js Define the HTTP PUT method, and may contain some service functions here.

Please try to startup the Tomcat server by running {your_tomcat_installed_path}\bin\startup.bat as:


A Tomcat command line console will be show, and outputting the log messages:


You may now go to this URL : http://localhost:8080/AngularUI/ with FireFox or Chrome browser:


The menu will be shown if maximizing the window, or simply clicking the :


You may find the below (CRUD) actions from this web UI:

HTTP Method Actions
GET Get / List record(s)
POST Create record
PUT Update record
DELETE Delete record


R – Read the list of customers [GET Method]

Let’s go to Customer List page, you can find the list of customers here. The UI will make a HTTP GET request to the Restful server getting the list of customer JSON, and displaying on the page.


U – Update Existing Customer [PUT Method]

Simply click on  button, it will show you the Customer Update page:


Let’s try to update some fields, and then click , it will make a HTTP PUT request to the Restful server in order to update the record.

Click  going back to the Customer Listing page


C – Create New Customer [POST Method]

Please click , it will show you a Customer New page, and you may try to fill in the values and click to save the new record. A HTTP POST request will be sent to the Restful server.

Click  going back to the Customer Listing page.


D – Delete Any Customer [DELETE Method]

Please click of the newly added record, it will pop-up a dialog window for your confirmation:


Click OK to confirm, and it will delete the record by sending HTTP DELETE request to server.


You see… Node.js Restful server with Angular UI is so simple…

Please rate this