multiple ui-views in default component? #5

longbowww · 2016-07-31T13:42:25Z

is it possible to replicate multiple views in the default app state like we could do in angular 1.x?

e.g.

            .state('root', {
                url: '',
                abstract: true,
                views: {
                    'nav': {
                        templateUrl: 'app/core/views/navbar/navbar.html',
                        controller: 'navbarCtrl',
                        controllerAs: 'nav'
                    },
                    'footer': {
                        templateUrl: 'app/core/views/footer/footer.html',
                        controllerAs: 'footer'
                    }
                }
            })

for ng2 i now kinda hacked it and defined a app.home state which maps to /

let MAIN_STATES:Ng2StateDeclaration[] = [
  {
    name: 'app',
    url: '',
    component:AppComponent
  }
];

export let HOME_STATES: Ng2StateDeclaration = [
  {
    name: 'app.home',
    url: '/',
    views: {
      header:{component: NavComponent},
      $default: {component: MainComponent},
      footer: {component: FooterComponent}
    }
  }
];

all tries with abstract and directly defining the app main state failed

The text was updated successfully, but these errors were encountered:

demisx · 2016-08-05T19:14:00Z

Something like this should work:

// in app.states.ts
const mainStates: Ng2StateDeclaration[] = [
  {
    name: 'app',
    abstract: true,
    views: {
      'header@app': { component: NavComponent },
      $default: { component: AppComponent },
      'footer@app': { component: FooterComponent }
    },
  }
];

export const INITIAL_STATES: Ng2StateDeclaration[] =
  mainStates
    .concat(homeStates);

// in home.states.ts
export const homeStates: Ng2StateDeclaration = [
  {
    name: 'app.home',
    url: '/',
    views: {
      $default: { component: HomeComponent },
    }
  }
];

christopherthielen · 2016-08-05T19:39:03Z

Although the quickstart app bootstraps a single UIView:

  <body>
    <ui-view>Loading...</ui-view>
  </body>

you can instead bootstrap a layout component which contains your named views:

  <body>
    <app-layout></app-layout>
  </body>

@Component({
  selector: 'app-layout',
  directives: [UIROUTER_DIRECTIVES],
  template: `
  <ui-view name="nav"></ui-view>
  <ui-view></ui-view>
  <ui-view name="footer"></ui-view>
`
}) 
export class AppLayout { }

var appState =   {
    name: 'app',
    abstract: true,
    views: {
      'header': { component: NavComponent },
      $default: { component: AppComponent },
      'footer': { component: FooterComponent }
    },
  }
}

christopherthielen · 2016-08-25T21:47:16Z

Closing because I think this questino is answered.

christopherthielen closed this as completed Aug 25, 2016

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

multiple ui-views in default component? #5

multiple ui-views in default component? #5

longbowww commented Jul 31, 2016

demisx commented Aug 5, 2016 •

edited

christopherthielen commented Aug 5, 2016 •

edited

christopherthielen commented Aug 25, 2016

multiple ui-views in default component? #5

multiple ui-views in default component? #5

Comments

longbowww commented Jul 31, 2016

demisx commented Aug 5, 2016 • edited

christopherthielen commented Aug 5, 2016 • edited

christopherthielen commented Aug 25, 2016

demisx commented Aug 5, 2016 •

edited

christopherthielen commented Aug 5, 2016 •

edited