I am developing a single page app (index.html) with the following relevant sections:
<!DOCTYPE html>
<html>
<head>
<base href="/mi_ui/">
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css">
<script src="assets/js/angular.js"></script>
...
<body ng-app="sk" ng-controller="mainController as main">
<div ng-view></div>
The relevant parts of the route file are:
.when('/home',{
templateUrl: 'views/home.html',
controller: 'homeController',
controllerAs: 'home',
})
All my code is stored in a folder named "mi_ui". Only the base href path that I set above works properly, while other values like (/) do not load the resources.
My Folder structure is:
mi_ui
--assets
----css
----js
----images
------loader.gif
--services
--controllers
--views
----home.html
app.js
index.html
The application runs smoothly, but I am facing an issue when trying to load the loader.gif in home.html. I have added the following code:
<img ng-src="assets/images/loader.gif" id="gif">
However, the image is not loaded. After inspecting the Chrome developer console, I noticed that only files referenced in index.html appear in the sources tab! If I move the img line to index.html, the file is loaded and shown in Chrome sources tab, but not from home.html. Any suggestions on how to resolve this?
The app is being run on tomcat 7.