An interesting obstacle arose when I tried to use Angularjs (NG) in Tomcat, specifically in regards to the path.
Typically, I’ve been using NG assuming everything starts at the root path. So my index.html is at http://domain.com/index.html.
However, in Tomcat, each webapp has its own starting path. So you may have a weather webapp that is at http://domain.com/weather/ and a clock webapp at http://domain.com/clock/.
How do you configure NG within tomcat?
You could hardcode your starting path. But imagine if you wanted to have two clock webapps in tomcat, renaming one to http://domain.com/clock1/ and the other http://domain.com/clock2.
Now you would have to change all the references of “clock” to “clock1” and “clock2” respectively. And there are many references…
In the index.html, you have to change all your <link …css> as well as all <script …js>. You might think that you can outsmart yourself by changing the index.html to a index.jsp and using <%=request.getContextPath()%>.
But then you still have to change references of the hardcoded path in your .js files, such as your app.js that defines your module and routes.
And don’t even get me started on all your templates that reference .js and .css.
Well, let me jump straight to the short answer.
In your index.html, simply add this within your <head> tag
<head>
<base href="/clock/" />
</head>
That’s it. Now all your relative paths will have that base href prefixed to them automatically.
So <link href=”mystyle.css”> will automatically fetch from http://domain.com/clock/mystyle.css
<script src=”myscripts.js>” will automatically fetch from http://domain.com/clock/myscripts.js
Even app.js will leverage this base when using relative url’s.
e.g. $routeProvider.when(‘/’, {templateurl: ‘home.html’})
will automatically reference http://domain.com/clock/home.html
This html standard can even be used on jsp pages. Anything that is html will take advantage of it
koding notes 