for the back end,
- Java (1.8.0_144)
- Jersey
- Maven (3.3.9)
- MongoDB (3.2)
- Spring
- Tomcat
for the front end,
- AngularJS
- Bootstrap (to be utilized later)
I am exploring AngularJS for connecting the back end (in Java) to the front end.
At this early stage, the front end is not an independent project. My goal is to
set up a project architecture robust enough to build an actual application on later.
So, the current code is deliberately kept minimum and simple. To give some motivation
and a sense of direction, however, this application is meant to be a very basic address
book: you can add (POST) the name and email of a new contact and retrieve (GET) the
email by the name. (I have not added functionalities corresponding to PUT and DELETE yet.)
I would also comment on the lack of tests in the current package. I normally write unit
tests in tandem with feature code, using a Jersey based testing infrastructure, for
the back end. However, given the simplicity of the code and unfamiliarity with testing
frameworks for AngularJS, at this point I have not added tests yet. (I used Fiddler for
backend code debugging.)
I based this small project on several online sources, which are acknowledged in the
References section at the bottom as well as in the pertinent files.
(Refer to the screen shots below for illustration.)
- In the project root directory, build the source code with Maven by "mvn clean install".
- Run Mongo, and make a new database called "testdb".
- In the address-book-web directory, do "mvn tomcat7:run" to start the application.
(If using IntelliJ, in Edit Configurations specify your file path to the address-book-web
directory, enter "tomcat7:run" in the "command line" box, save, and then click Run.) - Open http://localhost:8080/address-book-web on a browser, to get to the home page.
- Click New Contacts link at the top.
- Enter the name and email of a new contact and submit.
- Click Contacts link at the top.
- Enter the name of the new contact you just made and then submit, to get
the email address from the database.
(Since this is not meant as a practical application and the work is still in progress,
I have not checked error handling yet; be careful and gentle when trying the app!)
You do not see the effect of Bootstrap in the screen shots below; Bootstrap has been
installed as a Maven dependency but the link to the CSS is commented out for now.
More generally, I still have to find time to make the UI look reasonably appealing.
For step 4:
For step 6:
For step 8:
When submit the request, you get the email address from the database:
Of course, the document is in the collection:
For the back end configuration:
https://chiaboy.wordpress.com/2014/07/20/simple-jersey-example-with-intellij-idea-and-tomcat/
https://github.com/jersey/jersey/tree/2.4.1/examples/helloworld-spring-webapp
https://spring.io/guides/gs/multi-module/
https://maven.apache.org/guides/introduction/introduction-to-the-pom.html
http://books.sonatype.com/mvnex-book/reference/multimodule-sect-intro.html
For the front end set up:
http://sivalabs.in/2014/09/angularjs-tutorial-getting-started-with-angularjs/
https://github.com/sivaprasadreddy/proof-of-concepts/tree/master/angularjs-samples
http://draptik.github.io/blog/2013/07/13/angularjs-example-using-a-java-restful-web-org.si.service/
https://github.com/draptik/angulardemorestful
https://www3.ntu.edu.sg/home/ehchua/programming/webprogramming/AngularJS_Basics.html
https://stackoverflow.com/questions/24710503/how-do-i-post-urlencoded-form-data-with-http-in-angularjs
(in particular for a function for data encoding, which enables use of @FormParam annotation in the backend)
For basic understanding of Java web applications and Tomcat:
https://www3.ntu.edu.sg/home/ehchua/programming/howto/Tomcat_HowTo.html
(More generally, the author of this site has a lot of thorough and insightful
tutorials at his home page; check: https://www3.ntu.edu.sg/home/ehchua/programming/index.html)
For use of filters: