I currently have a router set up in my application:
var mainmodule.config(function($routeProvider){
$routeProvider.when('/home',{
templateUrl:'src/home/home.html'
};
$routeProvider.when('/home/sports',{
templateUrl:'src/home/sports.html'
}
})
The routing functionality works perfectly fine.
However, I am facing an issue with the styling in my main file (index.html). The css
linked in the head section is as follows:
<link rel="stylesheet" href="css/main.css"/>
When I reload the page at localhost:8080/home
, the styles load correctly. But, when I reload the page at localhost:8080/home/sports
, the styles are not found because it attempts to load localhost:8080/home/css/main.css
instead of localhost:8080/css/main.css
.
Is there a specific configuration that I may have missed to instruct the routeProvider
to maintain the original css path?
Thank you for your help!