I want to serve AngularJS application using spring boot (using embedded tomcat server). When I am serving the application by requesting index.html every thing is working fine. , but I want to directly serve the required view along with index.html.
For example,
If I have multiple views like view1.html, view2.html(div elements) and one of these views can be included in index.html. I want to create mapping using controller in springboot app which can directly load index.html with view1.html or view2.html depending upon the url pattern..
(\pattern1 -- will load the index.html along with view1.
html and \pattern2 -- will load the index.html along with view2).
You could read your url from Angular with something like:
$routeProvider.when('/view1/:param1/:param2', {
templateUrl: 'view1.html',
controller: 'MyCtrl1'
});
So depending on your url, template is changed at the time you access the view.
Of course you can manage it trough "states" via $stateProvider.
Related
We have an MVC project with AngularJS sitting on top of it.
Question - is possible to preload static HTML files (partial templates) into templateUrl property for Angular's custom components or directives.
If it is possible, can I use Angular's #templateCache to make the project work offline?
The reason I am asking is that in all examples I have found, there is no MVC, just plain html folder structure.
But with MVC all requests to load a view go through MVC Controller's Action, that loads the view.
So, by specifying templateUrl: 'mypartialview.html' will do nothing since I dont have .html files, also there is no such path that will tell templateUrl where to look for a template.
by specifying templateUrl: '/HomeController/mypartial/' - can this be done? to get the partial view?
If yes, can I cache it using Angular's #templateCache to make the project work offline?
Thanks.
I'm using Spring Boot 1.4.0.M2, Angular 1.5.8, Angular UI Router 0.3.1, and Thymeleaf templating.
What I want to do is to remove hash # from my url I want to something like this:
http://localhost:8080/#/contact
look like this
http://localhost:8080/contact
What I did:
added to my angular configuration.js file something like this:
$locationProvider.html5Mode(true);
$locationProvider.hashPrefix('!');
added to my userIndex.html head
base href="/userIndex.html"/>
This userIndex.html contains all js libraries, this is my single page index page it contains imports like this:
<script type="text/javascript" th:src="#{/js/lib/jquery.min.js}" />
and UI router:
<div ui-view="" class="ui-container"></div>
After this hash # disappear from URL, but!
I open my web page http://localhost:8080/ than click link to for example "/contact" and go to sub page URL look perfect http://localhost:8080/contact no hash and page look like this.
And that when I press F5 to reload web page http://localhost:8080/contact and than content look like this:
Starting from http://localhost:8080/ and clicking link to /contact make everything ok, trying to enter URL http://localhost:8080/contact present raw html without css, js etc. userIndex.html is not loaded is it possible to load it to sub page like /contact?
This is how my project and template config looks like
Is any body here who could help me to fix this reload thing? Maybe it is something wrong with my spring boot template config?
The difference between the two ways is that in the first case you download the userIndex.html file and afterwards angular is intercepting your location change on client side to render the contact state.
In the second case, you are requesting the contact path from the server directly. This is where your viewController configuration comes into play and returns the probably not wanted html instead of the index page which would be required to run your angular app.
For node.js there is a concept called historyApiFallback that registers a 404 error handler to return the index.html page (e.g. this express module: https://github.com/bripkens/connect-history-api-fallback). In your case you need to avoid the clash between your registered viewControllers and the routing names used in the angular app. See this question for a similar case: How can I use Angular2 PathLocationStrategy in a Spring Boot application?
All in all it's not that convenient to use the PathLocationStrategy / html5Mode even if it is essential if you later want to have the possibility to also do server side rendering.
You need to configure server side routing. So when you removed the hash and you could go to the contact and it worked, but when you refreshed it lost the content because after refreshing the page your server tried to find contact.html and if it find in your case it served only that without the css and other stuff. Depend's on your server you can configure your server to fallback to index.html all the time so when it can not find the requested page. and set base to / otherwise server will go to the root of directory and find the contact.html and serve it to you and it will be raw without css. I hope i could explain it to you. You can search for the url-re-writer for your server.
Currently, I have a small Web site using Spring MVC (controller) with JSP pages.
I would like to migrate JSP pages to AngularJS/HTML but I have some troubles to understand the global picture.
I guess, I should migrate my #Controller to #RestController. These controllers will provide data/JSON necessary to display angularJS/HTML pages. Right ?
I haven't trouble to create these REST controllers: I can consult JSON data by using URL provided in request mapping of my REST controllers.
My problem is to display index page. In WEB-INF folder, I have an index.html. I would like to access to this page via: http://localhost/MyApp/
How should I process ?
A) Do I need a #Controller with request mapping on '/' which return 'index' view ? Then, the index.html will in charge to call REST controllers thanks to AngularJS ?
B) Should I disable all #Controller on server side and the index.html should be directly the entry point of my Web site ? How configure Spring MVC in this case ?
There are a lot of alternatives and all of them valid. With legacy Jspx MVC projects I do the next:
Small project
Create a package api to put on it the REST Controllers. Returns JSON
Create apackage web to put on it the View Controllers.
Big projects
Divide into separated projects
myproject- api. For REST: JSON
myproject-web. For frontend resources: HTML, CSS, JS
To serve the index.html,as you appointment, you need configure a Controller with a RequestMapping / that returs "index". The template views and viewresolver mades the trick.
From AngularJS I suggest try ui-router and retrieve views and resourfes according your url state.
I am running angular 1.5 spa application with angular-ui-router, where I load states as the user clicks on links. My application has subdomains like subdomain.domain.com. What I want is to load a state across the subdomains. Like if I am on a state subdomain1.domain.com/view/view1 and has to go to subdomain2.domain.com/view/view2, can there be a possibility to load the state without having to reload the whole angular app. I saw something like $window.history.pushState, but that does not work with subdomains. All the different subdomains use the same piece of angular code, means all the subdomains are pointing to the same server (managed through AWS)
I think it's not related to angularjs, when you go to subdomain2.domain.com you are going to a whole different web domain, it's not different from going to www.google.com, so angular can't treat it like a sub-page navigation in the same domain.
I think a similar effect may be achieved using templateUrl's though, just put your needed view templates on second domain address like:
angular.module('myApp', ['ngRoute'])
.config(function($routeProvider){
$routeProvider.when("/something",
{
templateUrl: "http://subdomain1.domain.com/view/view1.html",
controller: "AppCtrl1"
}
).when("/somethingElse",
{
templateUrl: "http://subdomain2.domain.com/view/view2.html",
controller: "AppCtrl2"
};
})
But the main app still resides on the same domain.
On my back-end I have a redirect that changes my page to be served via HTTPS.
Specifically this is a Spring back-end that uses a url-mapping file to handle redirects.
When using an angular templateUrl on a directive with a relative path (e.g., templateUrl: 'web/app/my-page.html' I get a mixed-content error.
Is angular not designed to handle this automatically? All of my other includes (e.g., angular.js, jquery.js) are fetched appropriately using HTTPS.
I'm still not sure why this was happening. What I did to get around it is to use gulp's ngHtml2js plugin to create a template cache. This prevents the need for XHR requests.