7

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="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script data-require="ui-router@*" 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.

user3081123
  • 425
  • 6
  • 15

1 Answers1

11

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'
          },
          'top@index' : { templateUrl: 'tpl.top.html',},
          'left@index' : { templateUrl: 'tpl.left.html',},
          'main@index' : { templateUrl: 'tpl.main.html',},
        },
      })
    .state('index.list', {
        url: '/list',
        templateUrl: 'list.html',
        controller: 'ListCtrl'
      })
    .state('index.list.detail', {
        url: '/:id',
        views: {
          'detail@index' : {
            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: {
          'detail@index' : {
            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: 'detail@index'

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 viewname@statename, 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)

Radim Köhler
  • 122,561
  • 47
  • 239
  • 335
  • That is just fantastic work you did! I'm very grateful. I'm cracking my head on your plunker and lots of things got clear to me right now. Still, I have a first question. What should I do to make layout.html dynamic? For example, to switch between ui-view=left and ui-view=main at the same place? – user3081123 Aug 17 '14 at 15:00
  • I would say, that you can do whatever you want while keeping this in mind: 1) dynamic are states not views 2) views belong to state and there could be many views defined for each state. That means: if we want to switch views - we have to use different state... I will try to show on that plunker – Radim Köhler Aug 17 '14 at 15:08
  • Ui router seems infinetebly flexible from this point. Thank you, sir, your plunker example helped me extremely well, I'll try to play with it on myself right now. – user3081123 Aug 17 '14 at 15:12
  • Please, check the updated version http://plnkr.co/edit/RqA2DuPnNEoYBBC8UrjL?p=preview. I added new state List2 which switches the main and left.... also the list2.detail does show how we can target more views even in detail... enjoy `ui-router` ... amazing tool – Radim Köhler Aug 17 '14 at 15:13
  • I think I've explained not properly, but I'll try to do it on myself, you've done great work so far. – user3081123 Aug 17 '14 at 15:17