CODEWITHSUNDEEP
javascriptangularjsangular-ui-routerangular-ui
Ron
Ron

Reputation: 6735

How to implement views in views for router

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?

Upvotes: 0

Views: 51

Answers (1)

Radim K&#246;hler
Radim K&#246;hler

Reputation: 123861

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:

Upvotes: 1

Related Questions