How to implement views in views for router

Question

With UI-Router, I can have multi ui-view in one router, but how about if I want to have multi ui-view inside in one of ui-view? Take a look of my example:

<html>
<body ng-app='app'>
<div ui-view='orders'></div>
<div ui-view='contacts'></div>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.14/angular-ui-router.min.js"></script>
<script type="text/javascript">
    angular.module('app', ['ui.router'])
    .config(function($stateProvider, $urlRouterProvider) {
        $urlRouterProvider.otherwise('/');
        $stateProvider.state('customer', {
            url: '/',
            views: {
                'orders': {
                    template:'<div>orders</div> <div ui-view="purchaseOrder"></div> <div ui-view="addresses"></div>',
                    views: {
                        'purchaseOrder': {template: '<span>purchaseOrder</span>'},
                        'addresses': {template: '<span>addresses</span>'}
                    }
                },
                'contacts': {
                    template: '<div> contacts</div>'
                }
            }
        })
    });

</script>
</body>
</html>

I really it can work the above way, but the views nested in view never shown on page. Anyone has a idea to do views in view?

Community · Accepted Answer · 2017-05-23 12:30:04Z

1

In general this concept of state definition:

...
views:
{
  views : { ... }
}

is not supported. But we can think about it as just syntax issue. Because we can change that into

// state 'index'
...
views:
{
  '': { ... place holder for other views ...}
  'targetA@index' : { ... injects into above view ... }
  'targetB@index' : { ... injects into above view ... }
}

I would suggest to check this Q & A (there is a working example):

Angular UI Router - Nested States with multiple layouts

The point is to introduce one special view, with the over all layout. That layout.html content could be:

<div>
  <section class="top">
    <div ui-view="top"></div>
  </section>

  <section class="middle">

    <section class="left">
      <div ui-view="left"></div>
    </section>

    <section class="main">
      <div ui-view="main"></div>
    </section>

  </section>
</div>

Now, we would have this view as a main view in our state, and the others will be injected into that layout.html:

.state('index', {
    url: '/',
    views: {
      // this goes into index.html ui-view
      '@' : {
        templateUrl: 'layout.html',
        controller: 'IndexCtrl'
      },
      // these are injected into layout.html
      // check the absolute naming 'top@index'
      'top@index' : { templateUrl: 'tpl.top.html',},
      'left@index' : { templateUrl: 'tpl.left.html',},
      'main@index' : { templateUrl: 'tpl.main.html',},
    },
  })

Read more about absolute naming here:

Angularjs ui-router not reaching child controller

edited May 23, 2017 at 12:30

CommunityBot

11 silver badge

answered May 7, 2015 at 12:02

Radim Köhler

124k48 gold badges243 silver badges343 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Ron Over a year ago

I don't think you solved my problem, what I want is to have views in views.

Ron Over a year ago

What I want is to have like viewA(viewA1, viewA2), viewB(viewB1, viewB2). I don't think nested states will solve my problem, because nested states will only show viewA and viewA1, but I really want to show both viewA1 and viewA2 at the same time.

Radim Köhler Over a year ago

But won't you have other views inside of layout.html? There is one state. This state has many views. One view is serving as a target for other views. This is native UI-Router solution. The other approach is State nesting. State (parent) has child. Child could target parent view or even index.html (root) views... I extended my answer. Maybe it could show now, that you can achieve with this approach exactly what you need... hope it makes it a bit more clear

Radim Köhler Over a year ago

Again, I extended my answer... and want to let you understand: Your syntax is not working BUT the concept is. Just with different kind of declaration...

Collectives™ on Stack Overflow

How to implement views in views for router

1 Answer 1

Angular UI Router - Nested States with multiple layouts

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related