Is there a way to use a stateprovider view template across all modules seamlessly?
In my index.html file, I have the following setup:
<div ui-view="nav"></div>
<div ui-view></div>
<div ui-view="footer"></div>
My configuration looks like this:
$urlRouterProvider.otherwise('/');
$stateProvider.
state("home",
{
url: "/",
views: {
"": {
templateUrl: "main.html"
},
"nav": {
templateUrl: "modules/nav/nav.html"
},
"footer": {
templateUrl: "modules/footer/footer.html"
}
}
});
While this setup works well for the root and default route, it doesn't display the nav and footer when navigating to localhost:8000/page1 with this configuration:
$stateProvider.
state("page1",
{
url: "/page1",
views: {
"": {
templateUrl: "modules/page1/page1.html"
}
}
});
If I manually add the nav and footer view templates to each config, it works as expected. However, I want to avoid repeating myself in every page and module configuration. Is there a way to make these definitions apply universally based on my main config for the default route?
Should I consider using ng-include instead of ui-view? While ng-include works fine, I prefer the simplicity of ui-view.
If you have found a solution to this issue, I would greatly appreciate your input. Thank you!