AngularJS 1.x with Spring MVC RESTful web service beginner tutorial in 14 steps

Step 1: Create a maven based Java project from a command-line.

Step 2: Import the project into Eclipse as “File” –> “Import” –> “Existing Maven Projects”. Browse “C:\projects\simple-angularjs”.

AngularJS with Spring MVC RESTful project structure

Server side – Sprng MVC Restful service

Step 3: The model to represent an account in the package “com.mytutorial.model” in “src/main/java”.

Step 4: The service layer to return a list of accounts in the package “com.mytutorial.service” in “src/main/java”.

Step 5: The controller for the RESTful web service in the package “com.mytutorial.controller” in “src/main/java”.

Step 6: The UI controller to return a web page in the package “com.mytutorial.controller” in “src/main/java”.

Client side – AngularJS 1.x code in a JSP page

Step 7: The “accounts.jsp” page in the folder “src/main/webapp/WEN-INF/views”. Refer to the angular 1.x API at https://docs.angularjs.org/api.

Quick & dirty: Angular code embedded in JSP
Better approach: Angular code in separate .js files

Step 8: The client side JavaScript file app.js in “src/main/webapp/static/js”

Step 9: The client side JavaScript file account_service.js in “src/main/webapp/static/js/service” to make a RESTful service call from the browser.

Step 10: The client side JavaScript file account_controller.js in “src/main/webapp/static/js/controller” that binds the model “a list of accounts” and the view, which the html returned by the “accounts.jsp”.

Spring config to put all together

Step 11: CORS(i.e. Cross-Origin Resource Sharing) filter to enable JavaScript to make cross domain requests. In the packge “com.mytutorial.filters” in “src/main/java”.

Step 12: Spring web configuration to enable JSP as the view resolver & to incorporate the Java Script resources in the “src/main/webapp/static” folder. The Java config is in the package “com.mytutorial.config” in “src/main/java”.

Step 13: Spring web initializer in the package “com.mytutorial.config” in “src/main/java”.

Deploy & test

Step 14: Use “mvn clean install” to build the “simpleWeb.war” and deploy it to to Tomcat’s “webapps” folder.

You can hit the RESTful web service with:

http://localhost:8080/simpleWeb/entry//v1/forecasting/accounts.json

Spring MVC RESTful returning JSON data

You can hit the web app with:

http://localhost:8080/simpleWeb/entry/ui/accounts

AngularJS web page


300+ Java & Big Data Interview FAQs

16+ Java Key Areas Interview Q&As

800+ Java Interview Q&As

300+ Java & Big Data Tutorials