Currently, I am tackling a project at my workplace with my colleagues, but we are collectively stumped on how to proceed. Consequently, the details may come across as nebulous.
Allow me to present a preview of the expected layout: Template
The plan is for View A & B to encompass 3 states each, influencing the displayed content based on the selection made.
However, I am encountering an issue where only one view is visible, acting as a placeholder since the actual views have not been developed yet and none of the sub-views within View A appear.
<div id="main">
<div ui-view="viewa" class="col-sm-7">
<!--Content of ViewA supposed to be here-->
</div>
<div ui-view="viewb" class="col-sm-5">
<!--Content of ViewB supposed to be here-->
</div>
</div>
Listed below are the defined States:
$stateProvider.state("main", {
url: "/main",
views: {
"viewa@": {
abstract: true,
template: "<div ui-view></div>"
},
"viewb@": {
templateUrl: "btemps/default.html"
}
}
}).state("bobtheView", {
parent: "viewa",
url: "/",
templateUrl: "atemps/bob.html",
controller: "bobController"
}).state("billtheview", {
parent: "viewa",
url: "/bill",
templateUrl: "atemps/bill.html",
controller: "billController"
}).state("joetheview", {
parent: "viewa",
url: "/joe",
templateUrl: "atemps/joe.html",
controller: "joeController"
});
//Supposed to route to viewa showing bobtheview and viewb showing the template
$urlRouterProvider.otherwise("/main/");
Upon navigating to the root page, it defaults to the otherwise condition without displaying any content. Similarly, when accessing 'main', solely the viewb template appears.
Any suggestions or insights on optimizing the formatting? Would using "viewa.bobtheview" instead of the parent attribute be more efficient?
UPDATE: I managed to find a workaround by loading bobtheview, joetheview, and billtheview in separate HTML partials. Subsequently, I revamped the structure to control the view state of viewa and viewb through a main template that incorporates the "ng-include" function to load various templates. Since all data within these views is retrieved through JSON REST requests, the data bindings remain unaffected. However, I am currently grappling with updating the "ng-include" upon button click. While I haven't extensively researched this yet, I intend to do so and will provide updates accordingly. If you have any tips or ideas on this matter, feel free to share! :D.