CODEWITHSUNDEEP
javascriptangularjsangular-ui-router
DJC
DJC

Reputation: 1173

Child state doesn't load within parent

I am having trouble working out how to structure my routing code with UI router.

In my index file, I call in the menu template and 2 sidebar templates as follows: index.html

<!-- head code above here -->
<body ng-app="ICP_App" ng-cloak>
    <div layout-fill layout="row" ng-controller="AppController as AppCtrl">
        <div ui-view="left-nav"></div>
        <div ui-view="right-nav"></div>
        <div ui-view="toolbar"></div>

        <!-- this is where I am expecting/wanting my dashboard template to load (and others when at the correct url-->
        <div class="page-content view" ui-view></div>

        <!-- footer code under here -->

My routes:

$urlRouterProvider.otherwise('dashboard');

$stateProvider
    .state('root', {
        abstract: true,
        templateUrl: '../partials/icp_index.html',
        controller: 'AppController as AppCtrl',
        url: '',
        views: {
            'left-nav': {
                templateUrl: '../partials/left-nav.html'
            },
            'right-nav': {
                templateUrl: '../partials/right-nav.html'
            },
            'toolbar': {
                templateUrl: '../partials/toolbar.html'
            }
        }
    })
    .state('root.dashboard', {
        url: '/dashboard',
        templateUrl: '../partials/agency-dashboard.html',
        controller: 'AppController as AppCtrl'
    })

However, the menu and sidebars load, but the main content area is left blank. I wonder if it is to do with the '.otherwise'?

My index file should contain the menu and sidebars, then the content for that state to be loaded where I have indicated above - in this case the dashboard template. The '.otherwise' is there to show the dashboard (within the index file) when a url is incorrect or incomplete.

Thanks in advance.

Upvotes: 1

Views: 73

Answers (1)

weisk
weisk

Reputation: 2540

You have to name that ui-view, and on your child state, you need to specify and/or override the desired view, so it would be something like:

<div class="page-content view" ui-view="main-content"></div>

and the state definition: 

.state('root.dashboard', {
        url: '/dashboard',
        views: {
            'main-content@root': {
                templateUrl: '../partials/agency-dashboard.html',
                controller: 'AppController as AppCtrl'
            }
        }
    })

Also you should have two templates, one only defines the root ui-view (index.html), and the other one is your icp_index which contains the named views. This plunkr shows the structure:

plnkr.co/edit/zjngTr0JU6cUGBtMsfN0

Upvotes: 1

Related Questions