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:
- update the shutdown port from 8005 to 8115
- update the HTTP port from 8080 to 8181
- 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.