multiple ui-view html files in ui-router

Is it possible to make something using 2 or more html files using ui-view? I need it to be something like this : enter image description here

I've tryed to do something working on plinker, but looks like I clearly don't uderstand concepts. I've read a nested ui-vew tutorial but they simple make a single index.html and place multiple ui-view there, but I need multiple .html files.

test.html is just a file with some text that should be displayed under master header

index.html looks like this

<html ng-app="MyApp">
<head>
  <link href="stylesheets/style.css" rel="stylesheet">
</head>
<body>

<h4>
    This should be Master  header
</h4>
<div ui-view></div>

<script data-require="[email protected]*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script data-require="[email protected]*" data-semver="0.2.10" src="https://rawgit.com/angular-ui/ui-router/0.2.10/release/angular-ui-router.js"></script>
<script src="app.js"></script>
<script src="controllers/main.js"></script>

</body>
</html>

this is app.html

<head>
  <link href="stylesheets/style.css" rel="stylesheet">
</head>
<body>

<h4>
    This should be Sub  master header 
</h4>
<div ui-view></div>

</body>

and app.js is written on pseudo code showing how I want it to work, because I clearly have no idea how to make it work

    angular.module('MyApp', [
  'ui.router'
])
.config(function($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise('/');

    $stateProvider
        .state('index', {
            templateUrl: 'index.html',
            controller: 'IndexCtrl'
          })
        .state('index.test', {
            url: '/',
            templateUrl: 'test.html',
            controller: 'TestCtrl'
          })
        .state('app', {
            templateUrl: 'app.html',
            controller: 'AppController'
          })
        .state('app.test2', {
            url: '/test2',
            templateUrl: 'test2.html',
            controller: 'Test2Controller'
          })
})

test2.html is just a text.

Answers:

Answer

I am not sure if I do understand your goal 100%, but there is updated plunker, showing how we can work with nested views.

Firstly, there is a $state defintion showing the nesting:

$stateProvider
    .state('index', {
        url: '/',
        views: {
          '@' : {
            templateUrl: 'layout.html',
            controller: 'IndexCtrl'
          },
          '[email protected]' : { templateUrl: 'tpl.top.html',},
          '[email protected]' : { templateUrl: 'tpl.left.html',},
          '[email protected]' : { templateUrl: 'tpl.main.html',},
        },
      })
    .state('index.list', {
        url: '/list',
        templateUrl: 'list.html',
        controller: 'ListCtrl'
      })
    .state('index.list.detail', {
        url: '/:id',
        views: {
          '[email protected]' : {
            templateUrl: 'detail.html',
            controller: 'DetailCtrl'
          },
        },
      })

And here is the index core template layout.html:

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

And how it works?

I. List View

we can see the content of the tpl.top.html

<div>
  This is a tpl.top.html<br />
  <a ui-sref="index">index</a>
  <a ui-sref="index.list">index.list</a><br />

</div>

which does have some navigation to the index or list view. The list view, will be injected into the tpl.left.html, which looks like this:

<div>
  This is a tpl.left.html

  <h4>place for list</h4>
  <div ui-view=""></div>
</div>

Becuase the view target is unnamed <div ui-view=""></div>, we can defin list $state like this:

.state('index.list', {
        url: '/list',
        templateUrl: 'list.html',
        controller: 'ListCtrl'
})

we can see, that we target the index (root) state view anchor, which is unnamed. But for a detail we do use different technique:

II. Detail View

This is the content of the tpl.main.html:

<div>
  This is a tpl.main.html

  <h4>place for detail</h4>
  <div ui-view="detail"></div>
</div>

In this case, the anchor for a view is named: ui-view="detail", that is why we have to define that detail state like this:

.state('index.list.detail', {
        url: '/:id',
        views: {
          '[email protected]' : {
            templateUrl: 'detail.html',
            controller: 'DetailCtrl'
          },
        },
})

We can see, that because the parent view is not the target of our state (the grand parent index is the target) we have to use aboslute naming: '[email protected]'

III. View Names - Relative vs. Absolute Names

small cite from doc:

Behind the scenes, every view gets assigned an absolute name that follows a scheme of [email protected], where viewname is the name used in the view directive and state name is the state's absolute name, e.g. contact.item. You can also choose to write your view names in the absolute syntax.

SUMMARY:
So, this example is about it - about almost all essential features of the ui-router. We showed here how to use nesting, view naming (absolute/relative) and also how to use multiple views for one state (index state definition)
Please, observe that all in action here (click the inex.html in the top section, then try to select some details)

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.