CODEWITHSUNDEEP
springangular
Omaja7
Omaja7

Reputation: 129

Angular 5 together with Spring Thymeleaf

I've been trying to understand how can I use Angular 5 (or 2 or 4) together with Spring thymeleaf template together. My problem is that Angular 5 runs on CLI and it resolves as it's own project (app folder). But that makes it SPA and to be honest I do not like full SPA applications. In my opinion it makes them slow when huge data is there to be processed.

Instead I want to make multi page applications (which means page refresh and server side rendering). And I want to use some Angular 5 features (for example two way data binding). But how exactly I can achieve that? In Angular 1 (AngularJS) all I had to do was include it's source and done. But how about with Angular 5?

Upvotes: 1

Views: 3740

Answers (1)

Edwin M. Cruz
Edwin M. Cruz

Reputation: 462

Its not much different from AngularJS. You just need to include compilation of the typescript to javascript in your build using something like frontend-maven-plugin. In your thymeleaf templates you would need to point to your generated js files.

Check out the following: (link broken) http://justincalleja.com/2016/04/17/serving-a-webpack-bundle-in-spring-boot/

I used Thymeleaf to serve a common header and footer

<!doctype html> 
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>My APP</title>
</head>
<body>
<header th:replace="header.html :: headerContent">header content</header>
<app-root></app-root>
<footer th:replace="footer.html :: footerContent">footer content</footer>

<script type="text/javascript" src="inline.bundle.js"></script>
<script type="text/javascript" src="polyfills.bundle.js"></script>
<script type="text/javascript" src="styles.bundle.js"></script>
<script type="text/javascript" src="vendor.bundle.js"></script>
<script type="text/javascript" src="main.bundle.js"></script>
</body>
</html>

Upvotes: 4

Related Questions