Add AngularJS frontend to Spring Boot application

Question

I've generated a Spring Boot application by using Spring Initializr. This is the screenshot of my resources directory.

I added Angular dependencies by using <script> tag in index.html

<!DOCTYPE html>
<html lang="en" ng-app="companyApp">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-resource.min.js"></script>
<script src="app.js"></script>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
Hello, Spring!
</body>
</html>

My main application class is configured with @SpringBootApplication annotation.

Once I open the page, I get this error in the console

Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.0/$injector/modulerr?p0=companyApp&p1=Error…ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.0%2Fangular.min.js%3A20%3A449)

From documentation I see that some module failed to load. Should I include any other libraries in the index.html page to fix this error?

Asking if it's a "good" way is probably too opinionated to ask on StackOverflow as you can already see by the difference of the provided answers. There's no guarantee that any of them is the correct answer. Also view meta.stackoverflow.com/questions/265928/…. — Dimitri Mestdagh
– Dimitri Mestdagh, Commented Feb 16, 2016 at 13:41

droid8421 · Accepted Answer · 2016-02-20 11:08:52Z

1

Solved the issue. Just use Bower to download needed dependencies and add them to /static directory.

Include in index.html

<!DOCTYPE html>
<html lang="en">
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-resource/angular-resource.min.js"></script>
<script src="bower_components/angular-route/angular-route.min.js"></script>
<script src="app/app.js"></script>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body ng-app="companyApp">
Hello, Spring!
</body>
</html>

answered Feb 20, 2016 at 11:08

droid8421

8951 gold badge14 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Bassem Reda Zohdy · Accepted Answer · 2016-02-16 10:38:00Z

if you want to split your static contents in many ways:

put them separately on apache/nginx server then it will access your spring boot application throw REST, but with different IP "if different machine" or Port "on same machine".
spring boot application can get static content outside its fat jar if you put the in /static folder in same path of your fat jar file, and you can change this path in application.properties using spring.resources.staticLocations property check here
finally you can make jar project to contains your static contents and add this project using maven as dependency to your spring boot project, do not forget your static contents have to be in /resources/static

which option to use based on you case and you project size but it is recommended to split it if you have different developers working on front/back end.

Janome314 · Accepted Answer · 2016-02-16 12:32:48Z

0

Just add AngularJS using Spring Initializr and it will do it all for you, or do it separately and copy how it generates the front-end layout. I personally have resources -> static -> app then have all of my partials within 'app', index.html under 'static' and application.properties under 'resources'.

answered Feb 16, 2016 at 12:32

Janome314

365 bronze badges

2 Comments

droid8421 Over a year ago

Did you had to make any configuration changes? (I'm using IntelliJ). Also in start.spring.io should I select 'Web - Full-stack web development' to get AngularJS support?

Janome314 Over a year ago

Hmmm, looks like they've taken the obvious option away (or I'm mistaken...). I created a new project in IntelliJ using Spring's intializr service before. The fourth part of this article should give you what you need though and it's a good article for walking you through getting started really quickly. Here's the maven AngularJS dependency - <groupId>org.webjars</groupId><artifactId>angularjs</artifactId><version>${angularjs.version}</version>

Collectives™ on Stack Overflow

Add AngularJS frontend to Spring Boot application

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related