How to configure AngularJs with Spring MVC | SpringBoot

AngularJS is a JavaScript framework, extends HTML and very strong for Single Page Applications. In the tutorial AngularJs SpringBoot, JavaSampleApproach will guide you how to integrate Angularjs with Spring Boot.

Related articles:
How to integrate Http Angularjs with Spring MVC | Spring Boot
How to integrate Angular 4 with SpringBoot Web App and SpringToolSuite

I. Technologies for Angularjs SpringBoot

– Java 1.8
– Angularjs 1.6.0
– Maven 3.3.9
– Spring Tool Suite – Version 3.8.1.RELEASE

II. Overview

Create a simple Spring Boot application, with an index.html page , that includes a simple button for getting a current time by Angularjs script.

1. Project Structure

Here is structure of Angular-SpringBoot project
angularjs with spring boot project structure

2. Step to do

– Create SpringBoot project
– Create a simple WebController
– Create a index.html page
– Create a angularjs controller
– Run and check result

III. Practice
1. Create SpringBoot project

– Open Spring Tool Suite, on main menu, choose File->New->Spring Starter Project, add project info, then press Next for needed dependencies:
For Template Engines, choose Thymeleaf
For Web MVC, choose Web->Web

angularjs spring boot add needed dependencies

Then press Finish, Spring Boot project will be created successfully.
Open pom.xml file, check dependencies:

2. Create a simple WebController

Create a Simple WebController with 1 requestmapping:

3. Create an index.html page

Create an index.html file with Angularjs configuration:

Index.html file defines a button that is handle click events by an angularjs controller in js/controller.js file.

4. Create an Angularjs controller javascript file

controller.js file defines an angularjs controller for handling press events of a button in index.html file.

5. Run and check result

Builde SpringBoot project: mvn clean install. Then run with commandline: mvn spring-boot:run

Result:
angularjs springboot result

IV. Sourcecode

SpringBootAngularJs


Related Posts


2 thoughts on “How to configure AngularJs with Spring MVC | SpringBoot”

  1. Hello Team,

    1. You gave me the best example or springboot and angularjs.
    For me what is happening is angularjs is not loading. Can u please suggest me what is the issue?

    2. One more thing I need a help can we build a chatbot application using springboot and angularjs. If yes can you show me the sample one.

    1. Hi Gayatri,

      1. Problem

      We had checked the sourcecode and It works right!
      Please double check that you had done with the right way for steps we had given.

      For more details and video guide, please check out the tutorial: How to integrate Http Angularjs with Spring MVC | Spring Boot

      Note: You can download the attached sourcecode then import for running.

      For your issue, I guess you had wrong the setup step for Thymeleaf, details guide below:

      Create SpringBoot project
      – Open Spring Tool Suite, on main menu, choose File->New->Spring Starter Project, add project info, then press Next for needed dependencies:
      – For Template Engines, choose Thymeleaf
      – For Web MVC, choose Web->Web

      2. Project

      About chatbot project, please details your requirement about the project. Then contact with us via: Contact Form

      Our team will analysis and provide an architect solution… then contact with you late for our working.

      Regards,
      JavaSampleApproach

Got Something To Say:

Your email address will not be published. Required fields are marked *

*