is it possible to replicate multiple views in the default app state like we could do i

Something like this should work: <div class="highlight highlight-source-js notrans

Although the quickstart app bootstraps a single UIView: <div class="highlight high

multiple ui-views in default component? about quickstart-ng2 HOT 3 CLOSED

ui-router commented on April 20, 2024

multiple ui-views in default component?

from quickstart-ng2.

Comments (3)

demisx commented on April 20, 2024

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 },
    }
  }
];

from quickstart-ng2.

christopherthielen commented on April 20, 2024

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