how to use @StateConfig with ui-router multiple view sections

[pleerock]

Is there such ability? no info about it in the docs and examples

[tolemac]

Sample here https://github.com/brandonroberts/ng-forward-ui-router-example

Look at: https://github.com/brandonroberts/ng-forward-ui-router-example/blob/master/app/components/users/users.js

[pleerock]

@tolemac probably I wrote it wrong. I was talking about multiple root views at the same level with its subviews

[tolemac]

I think you have to do nothing new, Have you try this?

@Component({
  selector: 'app',
  template: `
    <div ui-view="view1"></div>
    <div ui-view="view2"></div>
    `
})
@StateConfig([
  { url: '/', views: {
          'view1': {
            templateUrl: 'report-filters.html',
            controller: ComponentView1
          },
          'view2': {
            templateUrl: 'report-table.html',
            controller: ComponentView2
          }
        }
    },
])
export class App {

}

[timkindberg]

Yeah I should add a feature to route a component to a named view. Right now that's not supported I don't think.

[tolemac]

I think ng-forward should wait for ngComponentRouter, at the moment I wouldn't loss time with ui-router.

IMHO.

[timkindberg]

Well ui-router has been the leading router. It will support Angular 2 at some point. Right now it's the best we got. We plan to support both it and the new router.

[ktersius]

So I looked around and I could not find any code samples defining abstract states without a url or component defined.

From what I could see if you try to define such states you get the following error :

Uncaught TypeError: TypeError while analyzing StateConfig 'App' state components.
    Invalid Providers: please make sure all providers are an Injectable(), Component(), Directive(), a Provider, or a module string.
    Here's the invalid values: , 

I suppose I'm doing it wrong somehow. It seems all samples I can find already define top level routes and import the required components for them. How would one do it if you wanted to only define the layout states without knowing what components you will need or the url for them?

@Component({
    selector: 'app',
    template: `<ui-view> </ui-view>`,
    providers : [uiRouter]
})
@StateConfig([
      {
                name  : 'app',
                abstract: true,
                templateUrl: 'default.tmpl'              
      },
    {
        name: 'app.dfl',
        abstract: true,
        views: {
            sidebarLeft: {
                templateUrl: '...'             
            },
            toolbar: {
                templateUrl: '...'              
            },
            content: {
                template: '<div id="admin-panel-content-view" class="{{layout.innerContentClass}}" flex ui-view></div>'
            },
            belowContent: {
                template: '<div ui-view="belowContent"></div>'
            }
        }
    }])
class App {
}