4

I have a common html structure in my app.html in order to apply for all pages:

<template>
<require from="header"></require>
<require from="side-bar"></require>
<require from="theme-panel"></require>
<require from="footer"></require>
<!-- BEGIN HEADER -->
<js-header></js-header>
<!-- END HEADER -->

<div class="clearfix"></div>

<!-- BEGIN CONTAINER -->
<div class="container">
    <div class="page-container">
        <!-- BEGIN SIDEBAR -->
        <js-side-bar></js-side-bar>
        <!-- END SIDEBAR -->
        <div class="page-content-wrapper">
            <div class="page-content">
                <!-- BEGIN STYLE CUSTOMIZER(optional) -->
                <js-theme-panel></js-theme-panel>
                <!-- END STYLE CUSTOMIZER -->
                <!-- BEGIN ACTUAL CONTENT -->
                <div class="fade-in-up">
                    <router-view></router-view>
                </div>
                <!-- END ACTUAL CONTENT -->
            </div>
        </div>
    </div>
    <!-- BEGIN FOOTER -->
    <js-footer></js-footer>
    <!-- END FOOTER -->
</div>
<!-- END CONTAINER -->
</template>

However, in my case, i have a login page with a totally different structure compared to others. In my app.js, i tried to use getViewStrategy() method to control which views i will render as following:

activate(params, routeConfig, navigationInstruction){
    this.navigationInstruction = navigationInstruction;
    //console.log("params", params); // undefined
    //console.log("routeConfig", routeConfig); // undefined
    //console.log("navigationInstruction", navigationInstruction); // undefined
    //console.log("router", router); //undefined
}
getViewStrategy(){
    if(this.navigationInstruction == 'login'){
        return "app_login.html";
    } else {
        return "app.html";
    }
}

in the code above, 'navigationInstruction' is undefined. Therefore, my solution cannot work well. Does anybody have another solution? Thanks so much!

Thanh Dang
  • 53
  • 4

2 Answers2

13

Great question. In fact, when you have two totally sections of the same single page application, the right thing to do is create multiple root view models, or shells.

First, set your app up for custom initialization by adding aurelia-app="main" to your body tag, and creating a new initialization file correspondingly named main.js. It should look like this.

export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging();

  // notice that we are setting root to 'login'
  aurelia.start().then(app => app.setRoot('login'));
}

The app.setRoot('login') line tells Aurelia to load a file called login.js as the app root. This file should look similar to your current app.js. You can do anything you want in this file and it's corresponding view, and it will stay totally separate from your main app.

To navigate back to your main app, you'll need to call app.setRoot('app'), which means you'll need to inject the Aurelia object into your Login view model.

import { inject, Aurelia } from 'aurelia-framework';

@inject(Aurelia)
export class Login {
  constructor(aurelia) {
    this.aurelia = aurelia;
  }
  goToApp() {
    this.aurelia.setRoot('app');
  }
}

For more information, see my full write-up here: Aurelia Login Best Practices

Matthew James Davis
  • 12,134
  • 7
  • 61
  • 90
  • please be sure to upvote and accept this answer if it does it for you :) – Matthew James Davis Aug 14 '15 at 15:15
  • Thanks so much! You solved my problem. I'm so appreciate for your help! – Thanh Dang Aug 14 '15 at 15:28
  • The blog domain appears to no longer be active (expired) .. is there an updated address? – Logic Labs Sep 04 '15 at 11:54
  • 1
    Is this approach still valid? I tried it, but having problems with the login view "getting stuck" in the app vm. Edit: Never mind, my problem was that I had put the context switch in "activate" rather than the constructor. Just a heads up for anyone else running into this. – Index Mar 22 '16 at 14:20
1

Try adding 'if' bind at the top of the sections select the page style you want based on the view model variable set during 'canActivate()' or 'activate()' process of each page.

<template>
    <template if.bind = "normalMain">
        ....
    </template>
    <template if.bind = "loginScreen">
        ....
    </template>
</template>
Chi Row
  • 1,106
  • 7
  • 18