We are trying to create an PWA and WEBAPP with ionic2 and his DeepLinker, but we are not sure how to use the DeepLinker and how to combine the pages and components. We would create main - container page with fix menu and fix header.
The main page has to contain static simple menu and static simple Header, under the header there should be a div containing the dynamic pages. We think a simple WebAPP and in our opinion also a PWA.
In this Example we are using “app” as main page and have two mor pages “dashboard” and “sensor-config”.
Here are our files:
app.module.ts:
@NgModule({
declarations: [
MyApp,
Dashboard,
SensorConfig
],
imports: [
IonicModule.forRoot(MyApp, {}, {
links: [
{ component: Dashboard, name: 'Dashboard', segement: 'dashbaord' },
{ component: SensorConfig, name: 'SensorConfig', segement: 'sensor-config' }
]
})
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
Dashboard,
SensorConfig
],
providers: []
})
export class AppModule {}
app.html:
<ion-menu [content]=“content”>
<ion-header>
<ion-toolbar>
<ion-title>Pages</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<button ion-item *ngFor="let p of pages" (click)="openPage(p)">
{{p.title}}
</button>
</ion-list>
</ion-content>
</ion-menu>
<ion-header>
<ion-navbar>
<button ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>Lanthings</ion-title>
</ion-navbar>
</ion-header>
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
app.components.ts:
import { Component, ViewChild } from '@angular/core';
import { Platform, MenuController, Nav } from 'ionic-angular';
import { StatusBar } from 'ionic-native';
import { Dashboard } from '../pages/dashboard/dashboard';
import { SensorConfig } from '../pages/sensor-config/sensor-config';
@Component({
templateUrl: 'app.html'
})
export class MyApp {
@ViewChild(Nav) nav: Nav;
// make HelloIonicPage the root (or first) page
rootPage: any = SensorConfig;
pages: Array<{title: string, component: any}>;
constructor(
public platform: Platform,
public menu: MenuController
) {
this.initializeApp();
// set our app's pages
this.pages = [
{ title: 'Dashboards', component: Dashboard },
{ title: 'Configure', component: SensorConfig }
];
}
initializeApp() {
this.platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
StatusBar.styleDefault();
});
}
openPage(page) {
// close the menu when clicking a link from the menu
this.menu.close();
// navigate to the new page if it is not the current page
this.nav.setRoot(page.component);
}
}
dashboard.html
<ion-content padding> <h1>Dashboard</h1> <h1>D1</h1> <h1>D2</h1> <h1>D3</h1> <h1>D4</h1> <h1>D5</h1> </ion-content>
sensor-config.html:
<ion-content padding> <h1>Configure</h1> <h1>C1</h1> <h1>C2</h1> <h1>C3</h1> <h1>C4</h1> <h1>C5</h1> </ion-content>
We hope that some of you (@mhartington, @brandyshea) can help us.
We are not shure if we are able to do this, but we think we should be able to do this and also many other people like to do this.
We are able to render ‘dashbaord’ and ‘sensor-config’ into ‘ion-nav’ from app.html, but the first line (h1) which is 'Dashboard" or “Configure” will be overload from the header from app.html, se picture below. So we are not sure, as many other peoples. How should we do a PWA with a static header and deeplinker in ionic2.
PLEASE can you help us? And give us the right solution for our example here?
Thx
