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 Restful API using Eclipse with port 8080, and Web UI using Tomcat with port 8181, please 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.

 

In order to change the Tomcat port, we need to update the tomcat default port by editing the {your_tomcat_installed_path}\conf\server.xml as:

  1. update the shutdown port from 8005 to 8115

  1. update the HTTP port from 8080 to 8181

  1. update the AJP/1.3 port from 8009 to 8119

and then, 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:8181/AngularUI/ with FireFox or Chrome browser:

 

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

 

Let’s move to the next blog for actions (CRUD) details.

Please rate this