I want to write an SPA with AngularJS on client side and Java EE on server side. If I understand it correctly, the idea for the frontend is to create a default page (let's call it index.html
) and implement routing to exchange parts of this default page. So with every request the default page is loaded and the routing logic replaces its parts depending on context path:
<!-- index.html -->
<html>
<body>
<!-- this block is replaced depending on context -->
<div ng-view></div>
</body>
</html>
<!-- page one -->
<div>
<h1>Page One</h1>
<a href="/specific">Some specific stuff</a>
</div>
<!-- page two -->
<div>
<h1>Page Two</h1>
</div>
Now, the routing logic could be something like this:
angular.module('myApp', [])
.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/', {templateUrl: 'pages/pageOne.html'})
.when('/someSpecific', {templateUrl: 'pageTwo.html'})
.otherwise({redirectTo: '/'});
}
]);
The question is, how do I couple this with Java EE and a Wildfly server instance? If I declare index.html
as the welcome page and do nothing else, the direct calls like http://website.org/someSpecificContext
will fail because no page is mapped to the path (and shouldn't be), so no page and no angular code will be loaded. If I make a redirection from every possible subpath to index.html in a servlet filter, then the path information will be lost, so every call will end in the index page. Maybe it's a silly newbie question, but I'm really stuck here and would appreciate any help.
Deploy an application But if you are running a standalone WildFly service, a simple way to deploy your application is to copy your application archive ( war/ear/jar ) into the $JBOSS_HOME/standalone/deployments directory in the server installation. The deployment-scanner subsystem detects the archive and deploys it.
WildFly is a Java Enterprise Edition fully featured application server that provides all the necessary features to run a Java web application. WildFly is designed and maintained by Red Hat and was formally known as JBoss AS.
WildFly is a popular choice for users and developers worldwide who develop enterprise-capable applications. WildFly, formerly known as JBoss Application Server, is an open source Java EE application server. Its primary goal is to provide a set of vital tools for enterprise Java applications.
I personally use undertow rewrite handler for this. There is unfortunately not a lot of documentation about this feature. You can find info here and also here. You have to basically rewrite those html 5 urls that only Angular knows about, however you have to respond with your server side REST component (I suppose you're using REST) when Angular asks for backend data. My REST resources are under the /api
root-path. This is an example of the undertow-handlers.conf file to be placed in the WEB-INF
folder:
regex['(.*/order/?.*?$)'] and not regex['(.*/api.*)'] -> rewrite['/index.html']
regex['(.*/billing/?.*?$)'] and not regex['(.*/api.*)'] -> rewrite['/index.html']
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With