I have created an error page with Thymeleaf and I use it that way because I can send error messages to users through the controller.
#ExceptionHandler(Exception.class)
public ModelAndView controllerExceptionHandler(
Exception e,
HttpServletRequest request) {
ModelAndView mav = new ModelAndView();
String[] messages = e.getMessage().split("</br>");
mav.addObject("message", messages);
mav.addObject("timestamp", new Date());
mav.addObject("url", request.getRequestURL());
mav.addObject("headerMessage", "Error :(");
mav.addObject("contentMessage", "We are working hard to resolve it.");
mav.setViewName("error");
mav.addObject("status", 500);
return mav;
}
In template file I have something like this:
<h1 class="mr-3 pr-3 align-top border-right inline-block align-content-center" th:text="${status}">404</h1>
<div class="inline-block align-middle">
<div>
<h1>Something went wrong...</h1>
</div>
<th:block th:each="msg : ${message}">
<h2 class="font-weight-normal lead" id="desc" th:text="${msg}">The page you requested was not found.</h2>
</th:block>
</div>
Previously I had a simple React JS application also running with Spring Boot and Thymeleaf and then I used Thymeleaf template to show that. I had a template index.html where was actually React JS build file, so every time I had to copy the build file inside there, JS and CSS files into a static folder (after build). Now the React APP got more complex and I decided to use frontendmaven plugin to build it straight away with backend.
How to tell Spring Boot to not try to use Thymeleaf when resolving ReactJS views? This is how I serve ReactJS views.
#RequestMapping("/")
public String index() {
return "index.html";
}
Or would it be possible to get rid of Thymeleaf? Is it possible to send variables to ReactJS views through Java controllers when serving those views? The modelandview example?
How to tell Spring Boot to not try to use Thymeleaf when resolving
React JS views?
Remove ThymeleafViewResolver in webconfiguration and switch to Rest api ( #Restcontroller instead of #Controller ). This way you are telling Spring for not to render a view instead act as api-endpoints.
Now you can update your react code to call these Spring rest apis, prebuilt using maven-frontend-plugin and deploy.
Now the question comes, what is the stating point for your application
Only for this purpose, you can create a single controller which will handle request to "/" and will return index page residing under resources/template folder. This index.html page will be using your prebuilt react pages as -
<script src="built/bundle.js"></script>
Demo application: https://github.com/ankidaemon/Spring5-ReactJS/tree/master/Section5/Video5.3/SpringSecurity-Reactjs-RestAPI
Is it possible to send variables to React JS views through Java
controllers when serving those views
This is called server-side-rendering, however for react this is different then jsp and freemarker, thymeleaf etc and I would say not an easy way to do it with react. You can try your luck with this -> https://codeburst.io/jsx-react-js-java-server-side-rendering-ssr-2018-cf3aaff7969d
Related
I am build desktop application using nw js with angular js, I want to use ui-router for routing. I have written function handlers for api call I dont want http request. when I start application with nw js only index.html is loading template urls are not loading. I found application working with ngRoutes but I want to include states in my routes. How to do this?
I have developed a REST application using Spring in NetBeans IDE.
Here is the relevant dir structure:
I want to integrate Angular functionality into it, but will prefer to keep it as a single app, rather than separate Angular and Spring apps.
The main index.html file should show the template home.html on the front page.
The Problem:
Adding HTML files to the templates folder doesn't seem to work in the Angular application. If I try to access the index.html and home.html files through Angular, I get a 404 error, but I can open them directly.
Here's the controller in my Spring application for these two files:
#RequestMapping("/")
public String index() {
return "index";
}
#RequestMapping("/home")
public String home() {
return "home";
}
I have written AngularJS code before by itself, and I didn't have any problems.
Am I mixing some things that I shouldn't?
Do I create all my AngularJS code in a separate folder, away from src/main/resources?
Spring maps your files placed in src/main/resources/static to the root directory of your application. This means a CSS file in your src/main/resources/static/css/ folder can be accessed by simply using the /css relative path.
Static resources such as CSS, Javascript, templates or images should therefore be placed in the static folder, where Angular will be able to access it.
This restriction does not extend to your main index.html file, and you can place it in the main project directory or under templates.
Answer taken from JBNizet in comments.
I was getting myself started with Angular JS.
I tried to put angular code in my html page and then I tried to open up browser but Angular JS didn't worked.
But when I requested the same page from server It did worked
A bit of mystry ...
as soon as angular need to load template code using a template url you have to serve the page via HTTP because angular can only load templates using HTTP.
one example would be :
<div>
<div ng-include="'templateA.htm'"></div>
<div ng-include="'templateB.htm'"></div>
</div>
Some directives of AngularJS use AJAX to load themselves and by default navigators like Chrome block AJAX request when they are local.
You can open your AngularJS app in any server e.g: http-server
Is there a way for you to use Laravel trans() or Lang::get() method using (lang folder) in AngularJS app?
Laravel view that displays an angular view with multiple controllers.
<div ng-view></div>
I have in public_html folder all my templates for my app.
With the default structure of a Laravel app you can't access the app/lang directory. However, you could write a grunt task or a Laravel command, that process all you language files and copy the results in your public directory to make it publicly available for your Angular app.
Today I decided to try out AngularJs with play framework, I've created a folder inside my public folder called AngularJs, in which i have generated an angular app with yeoman.
After generating the sources with grunt build, in the route folder of play, I've put:
GET / controllers.Assets.at(path="/public/javascripts/angularJs/src/dist", file="index.html")
Now the problem I am facing is that the index page is well retrieved but Angular doesn't load the templates.
Anyone have a clue?
Ok now I get it after fiddling around for a moment, the problem with angularJs and Play framework, is that play must serv all the angularJS resources, so the solution to the problem, is to create routes to the angularJs dist folder in your public play application folder.
for an angularJs application created with Yeoman and generated using "grunt build", you must define these routes :
GET /scripts/*Asset controllers.Assets.at(path="/public/javascripts/angularJs/scripts", Asset)
GET /views/*Asset controllers.Assets.at(path="/public/javascripts/angularJs/views", Asset)