Using Ui-router For "main" Layout?

I'm trying to create the 'main layout' for my page using ui-router views, but I can't seem to get it working right (various errors, controllers not getting called, templates not ge

Solution 1:

There is an answer Angular UI Router - Nested States with multiple layouts with a working plunker showing layout: http://plnkr.co/edit/I0BJ09BxR7nG9kZDeEIv?p=preview

The point is that there is index.html with

<divui-view="layout"></div>

And the root state then injects into that ui-view="layout" its own template (layout) and also injects into layout views.

So firstly the layout template:

<div><sectionclass="top"><divui-view="top"></div></section><sectionclass="middle"><sectionclass="left"><divui-view="left"></div></section><sectionclass="main"><divui-view="main"></div></section></section></div>

And here is state def

$stateProvider
  .state('root', {
    url: '',
    views: {
      'layout': {
        templateUrl: 'partials/layout/1-column.html'
      },
      'header@root': {
        templateUrl: 'partials/layout/sections/header.html'
      },
      'footer@root': {
        templateUrl: 'partials/layout/sections/footer.html'
      }
    }
  })

And how it is working? we are using the absolute and relative target names.

View Names - Relative vs. Absolute Names

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.

For example, the previous example could also be written as:

  .state('report',{
    views: {
      'filters@': { },
      'tabledata@': { },
      'graph@': { }
    }
  })