November 23, 2017

Example 3: Restful API Running with AngularJS Web CRUD UI

By Kelvin Hui Node.js - Restful with Express framework + MySQL 0 Comments

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
angular-animate.min.js angular-aria.min.js	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.