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
Related
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
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?
We have angularjs app with lot of js getting loaded during the initial page load. Which are not required as part of home page. How we can void these. Is requieedjs solve this. How and when other js files get loads.
requirejs can be troublesome to use with angular
use following:
https://oclazyload.readme.io/docs
I have multiple UI bundles.
My zuul yml entry
server
port : 8090
zuul:
routes:
ui:
url: http://localhost:8091
sensitive-headers:
When i try to hit url http://localhost:8090/ui
it loaded my html code but not include js and css file.
Thanks in advance.
I would want to have a closer look at the HTML that is returned when you go to the http://localhost:8090/ui. Or at least use Chrome developer tools to see what URL it is using when trying to load the JS and CSS. I had a similar issue with how Zuul does the routing. It is not a full reverse proxy in that it doesn't inspect the HTML body of the response to modify embedded URLs to be corrected.
Check out: https://github.com/spring-cloud/spring-cloud-netflix/issues/8
I am a newbie on sails framework and I started working on it then found that everything is in ejs. When I converted it into the HTML then it didn't work.
How to write client-side in HTML using AngularJS without ejs or with least ejs possible if we cannot remove it totally.
Where to write client-side routes and how to use ui-router in that?
You should place your angular code in assets/js. The html files are also to be placed in assets folder.
I have set up a basic sails/ angular app in github. Angular Demo