- \n
- Spring is an open-source framework created to address the complexity of an enterprise application development<\/li>\n
- One of the chief advantages of the Spring framework is its layered architecture, which allows a developer to be selective about which of its components they can use while providing a cohesive framework for
J2EE<\/code> application development<\/li>\n- Spring framework provides support and integration to various technologies for e.g.:\n
- \n
- Support for Transaction Management<\/li>\n
- Support for interaction with the different databases<\/li>\n
- Integration with the Object Relationship frameworks for e.g. Hibernate, iBatis etc<\/li>\n
- Support for Dependency Injection<\/span> which means all the required dependencies will be resolved with the help of containers<\/li>\n
- Support for
REST<\/code> style web-services<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n1.1.1 Spring MVC framework<\/h4>\n
Model-View-Controller<\/span> (MVC) is a well-known design pattern for designing the GUI based applications. It mainly decouples the business logic from UI by separating the roles of M<\/strong>odel, V<\/strong>iew, and C<\/strong>ontroller in an application. This pattern divides the application into three components to separate the internal representation of the information from the way it is being presented to the user. The three components are:<\/p>\n
- \n
- Model (M)<\/span>: Model\u2019s responsibility is to manage the application’s data, business logic, and the business rules. It is a
POJO<\/code> class which encapsulates the application data given by the controller<\/li>\n- View (V)<\/span>: A view is an output representation of the information, such as displaying information or reports to the user either as a text-form or as charts. Views are usually the
JSP<\/code> templates written with Java Standard Tag Library (JSTL<\/code>)<\/li>\n- Controller (C)<\/span>: Controller\u2019s responsibility is to invoke the Models to perform the business logic and then update the view based on the model\u2019s output. In spring framework, the controller part is played by the Dispatcher Servlet<\/li>\n<\/ul>\n
![\"Fig.](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/05\/mvc_overview.jpg\")
<\/a>Fig. 1: Model View Controller (MVC) Overview<\/figcaption><\/figure>\n 1.2 Angular framework<\/h3>\n
Angular<\/em> is a JavaScript MVC or Model-View-Controller framework developed by Google that lets developers build well structured, easily testable, and maintainable front-end applications. But before we start creating a real application using the angular library, let us see what the important parts of an angular application are.<\/p>\n
1.2.1 Templates<\/h4>\n
In Angular, a template<\/span> is an
HTML<\/code> with added markups. The angular library compiles the templates and renders the resultantHTML<\/code> page.<\/p>\n1.2.2 Directives<\/h4>\n
Directives<\/span> are the markers (i.e. attributes) on a DOM element that tell angular to attach a specific behavior to that DOM element or even transform the DOM element and its children. Most of the directives in the angular library start with the
ng<\/code>.<\/p>\n1.2.3 Expressions<\/h4>\n
An expression<\/span> is like a JavaScript code usually wrapped inside the double curly braces such as
{{ expression }}<\/code>. Angular library evaluates the expression and produces a result.<\/p>\nThese new APIs make developer’s life easier, really! But it would be difficult for a beginner to understand this without an example. Therefore, let us create a simple application using the Spring and Angular libraries.<\/p>\n
2. AngularJS with Spring MVC Example<\/h2>\n
Here is a step-by-step guide for implementing Spring MVC architecture in the angular web applications.<\/p>\n
2.1 Tools Used<\/h3>\n
We are using Eclipse Kepler SR2, JDK 8 and Maven. Having said that, we have tested the code against JDK 1.7 and it works well.<\/p>\n
2.2 Project Structure<\/h3>\n
Firstly, let\u2019s review the final project structure if you are confused about where you should create the corresponding files or folder later!<\/p>\n
![\"Fig.](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/05\/angular_spring_ex_project_structure_guide_1.jpg\")
<\/a>Fig. 2: Application Project Structure<\/figcaption><\/figure>\n 2.3 Project Creation<\/h3>\n
This section will show how to create a Java-based Maven project with Eclipse. In Eclipse Ide, go to
File -> New -> Maven Project<\/code>.<\/p>\n![\"Fig.](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/05\/angular_spring_ex_project_guide_1.jpg\")
<\/a>Fig. 3: Create Maven Project<\/figcaption><\/figure>\n In the New Maven Project window, it will ask you to select project location. By default, ‘Use default workspace location’ will be selected. Just click on next button to proceed.<\/p>\n
![\"Fig.](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/05\/angular_spring_ex_project_guide_2.jpg\")
<\/a>Fig. 4: Project Details<\/figcaption><\/figure>\n Select the ‘Maven Web App’ Archetype from the list of options and click next.<\/p>\n
![\"Fig.](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/05\/angular_spring_ex_project_guide_3.jpg\")
<\/a>Fig. 5: Archetype Selection<\/figcaption><\/figure>\n It will ask you to ‘Enter the group and the artifact id for the project’. We will enter the details as shown in the below image. The version number will be by default:
0.0.1-SNAPSHOT<\/code>.<\/p>\n![\"Fig.](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/05\/angular_spring_ex_project_guide_4.jpg\")
<\/a>Fig. 6: Archetype Parameters<\/figcaption><\/figure>\n Click on Finish and the creation of a maven project is completed. If you see, it has downloaded the maven dependencies and a
pom.xml<\/code> file will be created. It will have the following code:<\/p>\npom.xml<\/em><\/span><\/p>\n
<project xmlns=\"http:\/\/maven.apache.org\/POM\/4.0.0\" xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\" xsi:schemaLocation=\"http:\/\/maven.apache.org\/POM\/4.0.0 http:\/\/maven.apache.org\/xsd\/maven-4.0.0.xsd\">\r\n\t<modelVersion>4.0.0<\/modelVersion>\r\n\t<groupId>AngularSpring<\/groupId>\r\n\t<artifactId>AngularSpring<\/artifactId>\r\n\t<version>0.0.1-SNAPSHOT<\/version>\r\n\t<packaging>war<\/packaging>\r\n<\/project>\r\n<\/pre>\n
Let\u2019s start building the application!<\/p>\n
3. Application Building<\/h2>\n
Let\u2019s create an application to understand the basic building blocks of this tutorial.<\/p>\n
3.1 Maven Dependencies<\/h3>\n
In this example, we are using the most stable spring web-mvc, Jackson core, and Log4j version in order to set-up the Spring MVC and Angular functionality. The updated<\/strong> file will have the following code:<\/p>\n
pom.xml<\/em><\/span><\/p>\n
<project xmlns=\"http:\/\/maven.apache.org\/POM\/4.0.0\" xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\"\r\n\txsi:schemaLocation=\"http:\/\/maven.apache.org\/POM\/4.0.0 http:\/\/maven.apache.org\/maven-v4_0_0.xsd\">\r\n\t<modelVersion>4.0.0<\/modelVersion>\r\n\t<groupId>AngularSpring<\/groupId>\r\n\t<artifactId>AngularSpring<\/artifactId>\r\n\t<packaging>war<\/packaging>\r\n\t<version>0.0.1-SNAPSHOT<\/version>\r\n\t<name>AngularSpring Maven Webapp<\/name>\r\n\t<url>http:\/\/maven.apache.org<\/url>\r\n\t<dependencies>\r\n\t\t<!-- spring dependency -->\r\n\t\t<dependency>\r\n\t\t\t<groupId>org.springframework<\/groupId>\r\n\t\t\t<artifactId>spring-context<\/artifactId>\r\n\t\t\t<version>5.0.5.RELEASE<\/version>\r\n\t\t<\/dependency>\r\n\t\t<dependency>\r\n\t\t\t<groupId>org.springframework<\/groupId>\r\n\t\t\t<artifactId>spring-core<\/artifactId>\r\n\t\t\t<version>5.0.5.RELEASE<\/version>\r\n\t\t<\/dependency>\r\n\t\t<dependency>\r\n\t\t\t<groupId>org.springframework<\/groupId>\r\n\t\t\t<artifactId>spring-webmvc<\/artifactId>\r\n\t\t\t<version>5.0.5.RELEASE<\/version>\r\n\t\t<\/dependency>\r\n\t\t<!-- jstl dependency -->\r\n\t\t<dependency>\r\n\t\t\t<groupId>javax.servlet<\/groupId>\r\n\t\t\t<artifactId>jstl<\/artifactId>\r\n\t\t\t<version>1.2<\/version>\r\n\t\t<\/dependency>\r\n\t\t<!-- javax servlet api -->\r\n\t\t<dependency>\r\n\t\t\t<groupId>javax.servlet<\/groupId>\r\n\t\t\t<artifactId>javax.servlet-api<\/artifactId>\r\n\t\t\t<version>3.1.0<\/version>\r\n\t\t<\/dependency>\r\n\t\t<!-- spring and json dependency -->\r\n\t\t<dependency>\r\n\t\t\t<groupId>com.fasterxml.jackson.core<\/groupId>\r\n\t\t\t<artifactId>jackson-databind<\/artifactId>\r\n\t\t\t<version>2.9.5<\/version>\r\n\t\t<\/dependency>\r\n\t\t<!-- log4j dependency -->\r\n\t\t<dependency>\r\n\t\t\t<groupId>log4j<\/groupId>\r\n\t\t\t<artifactId>log4j<\/artifactId>\r\n\t\t\t<version>1.2.17<\/version>\r\n\t\t<\/dependency>\r\n\t<\/dependencies>\r\n\t<build>\r\n\t\t<finalName>${project.artifactId}<\/finalName>\r\n\t<\/build>\r\n<\/project>\r\n<\/pre>\n3.2 Java Class Creation<\/h3>\n
Let\u2019s create the different Java files required to carry out this tutorial.<\/p>\n
3.2.1 Implementation of POJO class<\/h4>\n
This model class defines the user schema and consists of two properties (i.e. name and department). These properties are used to save the user details and are passed on the view for further processing. Add the following code to it:<\/p>\n
User.java<\/em><\/span><\/p>\n
package com.jcg.angular.spring;\r\n\r\nimport java.io.Serializable;\r\n\r\npublic class User implements Serializable {\r\n\r\n\tprivate static final long serialVersionUID = 1L;\r\n\r\n\tpublic String name, department;\r\n\r\n\tpublic User() { }\r\n\r\n\tpublic User(String name, String department) {\r\n\t\tthis.name = name;\r\n\t\tthis.department = department;\r\n\t}\r\n\r\n\tpublic String getName() {\r\n\t\treturn name;\r\n\t}\r\n\r\n\tpublic void setName(String name) {\r\n\t\tthis.name = name;\r\n\t}\r\n\r\n\tpublic String getDepartment() {\r\n\t\treturn department;\r\n\t}\r\n\r\n\tpublic void setDepartment(String department) {\r\n\t\tthis.department = department;\r\n\t}\r\n\r\n\t@Override\r\n\tpublic String toString() {\r\n\t\treturn \"User [Name=\" + name + \", Department=\" + department + \"]\";\r\n\t}\r\n}\r\n<\/pre>\n3.2.2 Implementation of Controller class<\/h4>\n
This is a typical spring controller which is annotated by the Spring MVC annotation types. This class consists of the request mapping method which performs the business logic. Let\u2019s write a quick Java program in the spring controller class to handle the
HTTP<\/code> request. Add the following code to it.<\/p>\nUserCtrl.java<\/em><\/span><\/p>\n
package com.jcg.angular.spring;\r\n\r\nimport org.apache.log4j.Logger;\r\nimport org.springframework.http.MediaType;\r\nimport org.springframework.web.bind.annotation.RequestMapping;\r\nimport org.springframework.web.bind.annotation.RequestMethod;\r\nimport org.springframework.web.bind.annotation.ResponseBody;\r\nimport org.springframework.web.bind.annotation.RestController;\r\nimport org.springframework.web.servlet.ModelAndView;\r\n\r\n@RestController\r\npublic class UserCtrl {\r\n\r\n\tprivate static Logger log = Logger.getLogger(UserCtrl.class);\r\n\r\n\t\/\/ Redirects the user to the index page of the application.\r\n\t@RequestMapping(value=\"\/welcome\", method = RequestMethod.GET)\r\n\tpublic ModelAndView index() {\r\n\t\treturn new ModelAndView(\"welcome\");\r\n\t}\r\n\r\n\t\/\/ Sets the dummy user details.\r\n\t@RequestMapping(value = \"\/userlist\", method = RequestMethod.GET, produces = MediaType.APPLICATION_JSON_VALUE)\t\r\n\tpublic @ResponseBody User getDetails() {\r\n\t\tlog.info(\"Fetching the user details .... !\");\r\n\r\n\t\tUser user = new User();\r\n\t\tuser.setName(\"Java Code Geek\");\r\n\t\tuser.setDepartment(\"Technical Writing\");\r\n\r\n\t\tlog.info(\"User details are?= \" + user.toString());\r\n\t\treturn user;\r\n\t}\r\n}\r\n<\/pre>\n3.3 Configuration Files<\/h3>\n
Let\u2019s write all the configuration files involved in this tutorial.<\/p>\n
3.3.1 Spring Configuration File<\/h4>\n
To configure the spring framework, we need to implement a bean configuration file i.e.
spring-servlet.xml<\/code> which provide an interface between the basic Java class and the outside world. Put thisXML<\/code> file in theAngularSpring\/src\/main\/webapp\/WEB-INF<\/code> folder and add the following code to it:<\/p>\nspring-servlet.xml<\/em><\/span><\/p>\n
<?xml version=\"1.0\" encoding=\"UTF-8\"?>\r\n<beans xmlns=\"http:\/\/www.springframework.org\/schema\/beans\" xmlns:context=\"http:\/\/www.springframework.org\/schema\/context\" xmlns:mvc=\"http:\/\/www.springframework.org\/schema\/mvc\" xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\" xsi:schemaLocation=\"http:\/\/www.springframework.org\/schema\/beans http:\/\/www.springframework.org\/schema\/beans\/spring-beans.xsd http:\/\/www.springframework.org\/schema\/context http:\/\/www.springframework.org\/schema\/context\/spring-context.xsd http:\/\/www.springframework.org\/schema\/mvc http:\/\/www.springframework.org\/schema\/mvc\/spring-mvc.xsd\">\r\n \r\n <context:component-scan base-package=\"com.jcg.angular.spring\" \/>\r\n <mvc:annotation-driven \/>\r\n \r\n <!-- Resolves Views Selected For Rendering by @Controllers to *.jsp Resources in the \/WEB-INF\/ Folder -->\r\n <bean class=\"org.springframework.web.servlet.view.InternalResourceViewResolver\">\r\n <property name=\"prefix\" value=\"\/WEB-INF\/views\/\" \/>\r\n <property name=\"suffix\" value=\".jsp\" \/>\r\n <\/bean>\r\n<\/beans>\r\n<\/pre>\n
3.3.2 Web Deployment Descriptor<\/h4>\n
The
web.xml<\/code> file declares one servlet (i.e. Dispatcher Servlet) to receive all kind of the requests and the default welcome page when accessing the application. Add the following code to it:<\/p>\nweb.xml<\/em><\/span><\/p>\n
<?xml version=\"1.0\" encoding=\"UTF-8\"?>\r\n<web-app xmlns=\"http:\/\/java.sun.com\/xml\/ns\/javaee\" xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\" version=\"2.5\" xsi:schemaLocation=\"http:\/\/java.sun.com\/xml\/ns\/javaee http:\/\/java.sun.com\/xml\/ns\/javaee\/web-app_2_5.xsd\">\r\n \r\n <display-name>AngularSpring<\/display-name>\r\n \r\n <!-- Spring Configuration - Processes Application Requests -->\r\n <servlet>\r\n <servlet-name>SpringController<\/servlet-name>\r\n <servlet-class>org.springframework.web.servlet.DispatcherServlet<\/servlet-class>\r\n <init-param>\r\n <param-name>contextConfigLocation<\/param-name>\r\n <param-value>\/WEB-INF\/spring-servlet.xml<\/param-value>\r\n <\/init-param>\r\n <load-on-startup>1<\/load-on-startup>\r\n <\/servlet>\r\n <servlet-mapping>\r\n <servlet-name>SpringController<\/servlet-name>\r\n <url-pattern>\/<\/url-pattern>\r\n <\/servlet-mapping>\r\n \r\n <!-- Welcome File List -->\r\n <welcome-file-list>\r\n <welcome-file>index.jsp<\/welcome-file>\r\n <\/welcome-file-list>\r\n<\/web-app>\r\n<\/pre>\n
3.4 Creating Angular Views<\/h3>\n
Spring MVC supports many types of views for different presentation technologies. These include \u2013
JSP<\/code>,HTML<\/code>,XML<\/code> etc. Let us write a simple view in theAngularSpring\/src\/main\/webapp\/WEB-INF\/<\/code> folder. This page is configured with Angular components and act as an index page for the application. Add the following code to it:<\/p>\nwelcome.jsp<\/em><\/span><\/p>\n
<!DOCTYPE html>\r\n<html>\r\n\t<head>\r\n\t <meta http-equiv=\"Content-Type\" content=\"text\/html; charset=UTF-8\">\r\n\t <title>Angularjs Spring Mvc Example<\/title>\r\n\t \r\n\t <!-- AngularJs Javascript File -->\r\n\t <script type=\"text\/javascript\" src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.6.5\/angular.min.js\"><\/script>\r\n\t \r\n\t <!-- Bootstrap Css -->\r\n\t <link rel=\"stylesheet\" href=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/4.0.0\/css\/bootstrap.min.css\">\r\n\t <script type=\"text\/javascript\">\r\n\t var app = angular.module(\"app\", []);\r\n\t\r\n\t app.controller(\"ctrl\", ['$scope', '$http', function($scope, $http) {\r\n\t $scope.err_state = false; \/\/ Set the default error message state\r\n\t var fetch_usr_app_url = 'http:\/\/localhost:8080\/AngularSpring\/userlist'; \/\/ Set the application url to fetch the user details\r\n\t\r\n\t \/\/ Fetches the data from the Spring controller\r\n\t $scope.getData = function() {\r\n\t $http({\r\n\t method: \"GET\",\r\n\t url: fetch_usr_app_url,\r\n\t }).then(function(response) {\r\n\t $scope.user = response.data;\r\n\t console.log(\"Success\");\r\n\t }, function(response) {\r\n\t $scope.err_state = true;\r\n\t console.log(\"Failure\");\r\n\t });\r\n\t };\r\n\t }]);\r\n\t <\/script>\r\n\t<\/head>\r\n\t<body>\r\n\t <div id=\"angularSpring\" class=\"container\">\r\n\t <h1 align=\"center\" class=\"text-primary\">AngularJS - Spring Mvc Example<\/h1>\r\n\t <hr \/>\r\n\t \r\n\t <!------ AngularJs and Spring Mvc Example ------>\r\n\t <div ng-app=\"app\" ng-controller=\"ctrl\">\r\n\t <button id=\"submit_btn\" class=\"btn btn-primary\" ng-click=\"getData()\">Get User<\/button>\r\n\t <div>\u00a0<\/div>\r\n\t \r\n\t <!-- Success Response -->\r\n\t <div class=\"user_details\" ng-show=\"user != null\">\r\n\t <p>Name : {{ user.name }}<\/p><p>Department : {{ user.department }}<\/p>\r\n\t <\/div>\r\n\t <!-- Error Response -->\r\n\t <div id=\"showError\" ng-show=\"err_state\">\r\n\t <span class=\"text-danger\">Error in retrieving data!<\/span>\r\n\t <\/div>\r\n\t <\/div>\r\n\t <\/div>\r\n\t<\/body>\r\n<\/html>\r\n<\/pre>\n4. Run the Application<\/h2>\n
As we are ready for all the changes, let us compile the project and deploy the application on the Tomcat7 server. To deploy the application on Tomat7, right-click on the project and navigate to
Run as -> Run on Server<\/code>.<\/p>\n![\"Fig.](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/05\/angular_spring_ex_project_deploy_guide_1.jpg\")
<\/a>Fig. 7: How to Deploy Application on Tomcat<\/figcaption><\/figure>\n Tomcat will deploy the application in its web-apps folder and shall start its execution to deploy the project so that we can go ahead and test it in the browser.<\/p>\n
5. Project Demo<\/h2>\n
Open your favorite browser and hit the following URL to display the welcome page of the application.<\/p>\n
http:\/\/localhost:8080\/AngularSpring\/welcome\r\n<\/pre>\n
Server name (localhost) and port (8080) may vary as per your Tomcat configuration.<\/p>\n
![\"Fig.](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/05\/angular_spring_ex_project_demo_guide_1a.jpg\")
<\/a>Fig. 8: Application Index page<\/figcaption><\/figure>\n Here, as shown in Fig. 9 if the ‘Get User<\/span>‘ button is clicked, the user details are displayed.<\/p>\n
![\"Fig.](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/05\/angular_spring_ex_project_demo_guide_2a.jpg\")
<\/a>Fig. 9: User details<\/figcaption><\/figure>\n That\u2019s all for this post. Happy Learning!!<\/p>\n
6. Conclusion<\/h2>\n
In this tutorial, developers learned how to create a simple application using the Spring and Angular libraries. Developers can download the sample application as an Eclipse project in the Downloads<\/a> section.<\/p>\n
<\/a>7. Download the Eclipse Project<\/h2>\n
This was an example of creating a simple application using the Spring MVC and Angular framework.<\/p>\n
- View (V)<\/span>: A view is an output representation of the information, such as displaying information or reports to the user either as a text-form or as charts. Views are usually the
- Support for
- Spring framework provides support and integration to various technologies for e.g.:\n