Display different template on selecting an option in menu - html

Question

I'm trying to display different templates on selecting the menu options. I'm able to display it, but I want the menu to be displayed along with respective template selected in menu list (i.e., I want both menu and the respective option selected on same page). When I change the menu option, only the option template has to change and load different template keeping still displaying the menu.
Hope you got the idea. Can someone please suggest a way? Thank you.
Below are my codes:
UI Routing
"use strict";
angular.module('fleetOperate').config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("main");
$stateProvider
.state('main', {
url: '/main',
templateUrl: 'app/landingPage/main.html'
})
.state('settings', {
url: '/settings',
views: {
'': {
controller: 'settingsController',
templateUrl:'app/landingPage/features/settings/settingsTemplate.html'
},
'settingsControlPanel#settings': {
controller: 'settingsControlPanelController',
templateUrl:'app/landingPage/features/settings/settingsControlPanel/settingsControlPanelTemplate.html'
},
'truckSettings#settings': {
controller: 'truckSettingsController',
templateUrl: 'app/landingPage/features/settings/settingsControlPanel/truckSettings/truckSettingsTemplate.html'
},
'trailerSettings#settings': {
controller: 'trailerSettingsController',
templateUrl: 'app/landingPage/features/settings/settingsControlPanel/trailerSettings/trailerSettingsTemplate.html'
}
}
})
});
main HTML
<div class="icon-bar" ui-view="main">
<a ui-sref="settings" class="item">
<i class="fa fa-cog" style="font-size:48px;"></i>
<label>Settings</label>
Settings HTML
<div ui-view="settingsControlPanel"></div>
Menu HTML
<div class="panel settings-panel panel-primary">
<div class="panel-heading" align="center">Settings</div>
<ul>
<li><a ui-sref="truckSettings"><i class="fa fa-truck settings-truck-icon"></i>Truck Settings</a></li>
<li><a ui-sref="trailerSettings"><i class="fa fa-train settings-truck-icon"></i>Trailer Settings</a></li>
</ul>
</div>
<div ui-view="truckSettings"></div>
<div ui-view="trailerSettings"></div>
Truck Settings HTML
<div class="panel truck-settings-panel panel-primary">
<div class="panel-heading">Truck Settings</div>
<table class="table truck-settings-table table-bordered table-condensed table-striped">
<tr>
<th>Model: </th>
<td class="list-truck-settings-data"></td>
</tr>
<tr>
<th>
Make Month & Year:
</th>
<td class="list-truck-settings-data"></td>
</tr>
</table>
</div>
Trailer Settings HTML
<div class="panel trailer-settings-panel panel-primary">
<div class="panel-heading">Trailer Settings</div>
<table class="table trailer-settings-table table-bordered table-condensed table-striped">
<tr>
<th>Model: </th>
<td class="list-trailer-settings-data"></td>
</tr>
<tr>
<th>
Make Month & Year:
</th>
<td class="list-trailer-settings-data"></td>
</tr>
</table>
</div>

Answer 1

If you don't need to route to individual pages, but are satisfied with just toggling on and off different sections of HTML from the same controller view, you could use ng-includes. Clicking the menu would set the variable for a particular include on or off, making it visible or invisible.
Example:
Menu HTML
<div class="panel settings-panel panel-primary">
<div class="panel-heading" align="center">Settings</div>
<ul>
<li ng-click="showTruck = true; showTrailer = false;"><i class="fa fa-truck settings-truck-icon"></i>Truck Settings</li>
<li ng-click="showTruck = false; showTrailer = true;"><i class="fa fa-train settings-truck-icon"></i>Trailer Settings</li>
</ul>
</div>
<div ng-if="showTrailer" ng-include="path/to/trailerSettingsTemplate.html"></div>
<div ng-if="showTruck" ng-include="path/to/truckSettingsTemplate.html"></div>
Ideally, the menu click logic should be a method in the controller that sets all values false, and only the one to show as true.
This pattern does not use routing, so if you want users to be able to navigate with history, this will not work. But if you have no need for individual controllers for each of these subviews, includes will do the job.
Angular docs for ngInclude

Answer 2

I found this as one option to the above posted question. We can simply use ng-show to trigger the views, while the controllers are still binded to each views in router.
Menu HTML
<div class="panel settings-panel panel-primary">
<div class="panel-heading" align="center">Settings</div>
<ul>
<li><a ng-click="truck=true; trailer=false"><i class="fa fa-truck settings-truck-icon"></i>Truck Settings</a></li>
<li><a ng-click="truck=false; trailer=true"><i class="fa fa-train settings-truck-icon"></i>Trailer Settings</a></li>
</ul>
</div>
<div ui-view="truckSettings" ng-show="truck"></div>
<div ui-view="trailerSettings" ng-show="trailer"></div>