Multiple Views with nested views Angular

Question

So first off, I'm working on this for a project at work, but none of us have any idea how to do it, so it might be kind of vague.

Here is the template of how it is going to look: Template

So View A & B are going to have 3 states in them that will change the content of the view based on which one is selected

The problem I'm having is that only 1 view ever shows up and it is a test template for now because I don't have those views built but none of the sub views of View A ever show up. HTML

<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>

States:

$stateProvider.state("main", {
    url: "/main",
    views: {
        "viewa@": {
            abstract: true,
            template: "<div ui-view></div>"
        },
        "viewb@": {
            templateUrl: "btemps/default.html"
        }
    }
}).state("bobtheView", {
    parent: "viewa",
    //This is default for 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/");

So when I go to the page and go to the root it redirects to the otherwise but nothing shows up, upon just going to main, only the viewb template shows up.

Any ideas? Any way I can format it better too? Is it better to go with "viewa.bobtheview" over having the parent attribute in the mix?

UPDATE: So I found a work around, I loaded each of the bobtheview, joetheview and billtheview in html partials, then I refactored it so the view state of viewa and viewb are controlled within a main template that includes the "ng-include" function to load the different templates, and since all of the data that is stored in those views is given via JSON rest requests, there is no change in the data bindings. The problem I'm facing now, is updating that "ng-include" on button click, I haven't done extensive research on it but I plan on doing so and I'll report back when/if I find something. If you have any ideas on this let me know! :D.

Answer 1

So I found a viable answer to the question at hand, after extensive research and asking around, I went with the option of having 1 Controller and configuration state

$stateProvider.state("main", {
    url: "/",
    controller: "mainController",
    templateUrl: "temps/primary.html"
});
$urlRouterProvider.otherwise("/");

That went into the configuration settings, then my controller looked a little like this:

app.controller("mainController", ["$scope", "$state", "$stateParams", "$http", function($scope, $state, $stateParams, $http) {
     $scope.viewatemp = $stateParams.at; //Numeric value to represent template url for viewa
     $scope.viewbtemp = $stateParams.bt; //Numeric value to represent template url for viewb
     //Do some other stuff here
});

Then the HTML of "temps/primary.html" looked a little something like this:

<div ui-view="viewa" class="col-sm-5" ng-include="viewatemp"></div>
<div ui-view="viewb" class="col-sm-7" ng-include="viewbtemp"></div>

I did a little manipulation of the numeric value of viewatemp and viewbtemp to get the actual URL, those are being loaded from a JSON request from my ASP.net WebApi 2 Restful service, but all in all, it is quick, rather simple and still gets the job done and allows for further enlargement of the project.

And that there in solved my problem, cool thing about this, I can have as many as these as I want because they are all separate states with nested "views"

If you do have a better answer, let me know! This is only what I found and what worked for me.