Multiple States for Multiple Views On Single Page

Question

Multiple States for Multiple Views On Single Page

1.2k views Asked by Sat At 18 June 2015 at 18:34

I'm having some trouble targeting nested views on a single page with multiple views. Here's my code.

$stateProvider
    .state('root', {
        abstract: true,
        url: '/',
        views: {

            'viewA': {
                templateUrl: '/views/viewA.html'
            },

            'viewB': {
                templateUrl: '/views/viewB.html'
            }
        }
    })
    .state('root.sectionA1', {
        url: '',
        views: {
            'viewASub': {
                templateUrl: '/views/viewA.Section1.html'
            }
        }
    })
    .state('root.sectionA2', {
        url: '',
        views: {
            'viewASub': {
                templateUrl: '/views/viewA.Section2.html'
            }
        }
    })
    .state('root.sectionB1', {
        url: '',
        views: {
            'viewBSub': {
                templateUrl: '/views/viewB.Section1.html'
            }
        }
    })
    .state('root.sectionB2', {
        url: '',
        views: {
            'viewASub': {
                templateUrl: '/views/viewB.Section2.html'
            }
        }
    })

My index.html

<body>
  <div ui-view="viewA"></div>
  <div ui-view="viewB"></div>
</body>

The html to my 2 sections

<!-- viewA.html -->
view A content
<div ui-view="viewASub"></div>


<!-- viewB.html -->
view B content
<div ui-view="viewBSub"></div>

At this point all the subview states for viewA show up fine. I'm able to add multiple sections and show different states using the ui-sref link. But I'm unable get any of the 'viewB' subviews so show up. When I place the 'root.sectionB1' above 'root.sectionA1' the second section subviews show up fine. I'm assuming that I need to be more specific in how I'm referencing the parent of each subview. I'm I missing something here?

Original Q&A

There are 1 answers

**AWolf** · Answer 1 · 2015-06-18 19:22:20

You have had a copy / paste mistake in root.sectionB2 the view should be viewBSub then I think it's working as expected.

Please have a look at the demo below or at this fiddle.

angular.module('demoApp', ['ui.router'])
.config(function($urlRouterProvider, $stateProvider) {
    $urlRouterProvider.otherwise('/');
    $stateProvider
    .state('root', {
        abstract: true,
        url: '/',
        views: {

            'viewA': {
                templateUrl: 'views/viewA.html'
            },

            'viewB': {
                templateUrl: 'views/viewB.html'
            }
        }
    })
    .state('root.sectionA1', {
        url: '',
        views: {
            'viewASub': {
                templateUrl: '/views/viewA.Section1.html'
            }
        }
    })
    .state('root.sectionA2', {
        url: '',
        views: {
            'viewASub': {
                templateUrl: '/views/viewA.Section2.html'
            }
        }
    })
    .state('root.sectionB1', {
        url: '',
        views: {
            'viewBSub': {
                templateUrl: '/views/viewB.Section1.html'
            }
        }
    })
    .state('root.sectionB2', {
        url: '',
        views: {
            'viewBSub': { //copy / paste mistake
                templateUrl: '/views/viewB.Section2.html'
            }
        }
    })
});

[ui-view="viewASub"] {
    color: blue;
    /*border:1px solid #000;*/
}

[ui-view="viewBSub"] {
    color: red;
    /*border:1px solid #000;*/
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>

<div ng-app="demoApp">
<script type="text/ng-template" id="views/viewA.html">
    <!-- viewA.html -->
view A content
<div ui-view="viewASub"></div>
</script>
    <script type="text/ng-template" id="/views/viewA.Section1.html">
view A section 1
</script>
    <script type="text/ng-template" id="/views/viewA.Section2.html">
view A section 2
</script>
<script type="text/ng-template" id="views/viewB.html">
<!-- viewB.html -->
view B content
<div ui-view="viewBSub"></div>
</script>
<script type="text/ng-template" id="/views/viewB.Section1.html">
view B section 1
</script>
<script type="text/ng-template" id="/views/viewB.Section2.html">
view B section 2
</script>
<div ui-view="viewA"></div>
 <div ui-view="viewB"></div>
    <a ui-sref="root.sectionA1">sectionA1</a>
    <a ui-sref="root.sectionA2">sectionA2</a>
    <a ui-sref="root.sectionB1">sectionB1</a>
    <a ui-sref="root.sectionB2">sectionB2</a>
</div>

TechQA.

Multiple States for Multiple Views On Single Page

There are 1 answers

Related Questions in ANGULARJS

Related Questions in UIVIEW

Related Questions in ANGULAR-UI-ROUTER

Related Questions in NESTED-VIEWS

Popular Questions

Popular Tags

Trending Questions