<!DOCTYPE html>
<html>
<head>
<script src="https://code.angularjs.org/tools/system.js"></script>
<script src="https://code.angularjs.org/tools/typescript.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/reflect-metadata/0.1.3/Reflect.js"></script>
<script src="https://cdn.rawgit.com/angular/zone.js/master/dist/zone.min.js"></script>
<script src="config.js"></script>
<script src="https://npmcdn.com/ionic-angular@2.0.0-beta.10/bundles/ionic.system.js"></script>
<link href="https://npmcdn.com/ionic-angular@2.0.0-beta.10/bundles/ionic.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body>
<!-- this Ionic's root component and where the app will load -->
<ion-app></ion-app>
<script>
System.import('app.ts')
</script>
</body>
</html>
import { NavController } from 'ionic-angular/index';
import { Page1 } from 'page1.ts'
import { Component } from "@angular/core";
@Component({
templateUrl:"home.html"
})
export class HomePage {
greeting: string;
constructor(private nav: NavController) {
}
goToPage1() {
this.nav.push(Page1);
}
}
SCROLL-CONTENT {
overflow-y: auto !important;
}
CODE {
background: #EFEFEF;
}
/**
* PLUNKER VERSION (based on systemjs.config.js in angular.io)
* System configuration for Angular 2 samples
* Adjust as necessary for your application needs.
* Override at the last minute with global.filterSystemConfig (as plunkers do)
*/
(function(global) {
var ngVer = '@2.0.0-rc.1'; // lock in the angular package version; do not let it float to current!
//map tells the System loader where to look for things
var map = {
'app': 'src', // 'dist',
'rxjs': 'https://npmcdn.com/rxjs@5.0.0-beta.6',
'angular2-in-memory-web-api': 'https://npmcdn.com/angular2-in-memory-web-api' // get latest
};
//packages tells the System loader how to load when no filename and/or no extension
var packages = {
'app': { main: 'app.ts', defaultExtension: 'ts' },
'rxjs': { defaultExtension: 'js' },
'angular2-in-memory-web-api': { defaultExtension: 'js' },
};
var packageNames = [
'@angular/common',
'@angular/compiler',
'@angular/core',
'@angular/http',
'@angular/router',
'@angular/platform-browser',
'@angular/platform-browser-dynamic',
'@angular/router-deprecated',
'@angular/testing',
'@angular/upgrade',
];
// add map entries for angular packages in the form '@angular/common': 'https://npmcdn.com/@angular/common@0.0.0-3'
packageNames.forEach(function(pkgName) {
map[pkgName] = 'https://npmcdn.com/' + pkgName + ngVer;
});
// add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
packageNames.forEach(function(pkgName) {
packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
});
var config = {
transpiler: 'typescript',
typescriptOptions: {
emitDecoratorMetadata: true
},
map: map,
packages: packages
}
// filterSystemConfig - index.html's chance to modify config before we register it.
if (global.filterSystemConfig) { global.filterSystemConfig(config); }
System.config(config);
})(this);
/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/
import { ViewChild, Component } from "@angular/core";
import { ionicBootstrap, Platform, App, MenuController, Nav } from 'ionic-angular/index';
import { HomePage } from './home.ts';
import { Page1 } from './page1.ts';
import { MenuPage } from './menu.ts';
@Component({
templateUrl: './app.html',
directives: [MenuPage]
})
export class MyApp {
//@ViewChild(Nav) nav: Nav;
constructor(private platform: Platform, private menu: MenuController, private app: App) {
this.app = app;
this.platform = platform;
this.rootPage = HomePage;
// this.pages = [
// { title: 'Dashboard', component: HomePage },
// { title: 'Page 1', component: Page1 }
// ];
}
// 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
// //debugger;
// this.nav.setRoot(page.component);
// //this.nav.push(page.component);
// //console.log(this.nav);
// }
}
ionicBootstrap(MyApp);
<ion-header>
<ion-navbar primary>
<button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>
Ionic 2
</ion-title>
</ion-navbar>
</ion-header>
<ion-content class="has-header">
<div padding style="text-align: center;">
<h1>Ionic 2 Test</h1>
<p>
Use this template to create a demo environment
where the issues you're facing are reproduced. This will
help us in easily reproducing your issue and solving it faster (:
</p>
<button secondary (click)="goToPage1()">Thanks!</button>
</div>
</ion-content>
You can use this template to show examples of your Ionic 2 issue.
import { Component } from '@angular/core';
@Component({
templateUrl:"./page1.html"
})
export class Page1 {
constructor() {
}
}
<ion-header>
<ion-navbar primary>
<button menuToggle>
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>
Ionic 2
</ion-title>
</ion-navbar>
</ion-header>
<ion-content class="has-header">
<div padding style="text-align: center;">
<h1>Page 1 Test</h1>
</div>
</ion-content>
import { Component } from "@angular/core";
import {HomePage} from './home.ts';
@Component({
templateUrl: 'tabs.html'
})
export class TabsPage {
// this tells the tabs component which Pages
// should be each tab's root Page
tab1Root: any = HomePage;
}
<ion-tabs>
<ion-tab [root]="tab1Root" tabTitle="Tab 1" tabIcon="pulse"></ion-tab>
</ion-tabs>
<ion-menu persistent="true" [content]="content">
<ion-toolbar primary>
<ion-title>Pages</ion-title>
</ion-toolbar>
<ion-content class="menu">
<!-- <ion-list>
<button ion-item *ngFor="let p of pages" (click)="openPage(p)">
<i class="fa {{p.icon}}"></i> {{p.title}}
</button>
</ion-list> -->
<gl-menu></gl-menu>
</ion-content>
</ion-menu>
<ion-nav id="nav" [root]="rootPage" #content swipe-back-enabled="false"></ion-nav>
import {Input, Host, Component} from '@angular/core';
import {IONIC_DIRECTIVES, MenuController, Nav} from 'ionic-angular/index';
import {HomePage} from './home.ts';
import {Page1} from './page1.ts';
/*
Generated class for the Menu page.
See http://ionicframework.com/docs/v2/components/#navigation for more info on
Ionic pages and navigation.
*/
@Component({
selector: 'gl-menu',
templateUrl: './menu.html',
providers: [Nav]
})
export class MenuPage {
hideMenu: {'Dashboard': boolean, 'Schedule': boolean, 'Grades': boolean,'Attendance': boolean, 'Transcript': boolean, 'Discipline': boolean, 'Billing': boolean, 'Alerts': boolean}
pages: Array<{title: string, component: any, icon: string>;
nav: any;
constructor(@Host() nav: Nav, private menu: MenuController){
this.menu = menu;
this.nav = nav;
this.pages = [
{ title: 'Dashboard', component: HomePage },
{ title: 'Page 1', component: Page1 }
];
}
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
//debugger;
this.nav.setRoot(page.component);
//this.nav.push(page.component);
//console.log(this.nav);
}
}
<ion-list>
<button ion-item *ngFor="let p of pages" (click)="openPage(p)">
<i class="fa {{p.icon}}"></i> {{p.title}}
</button>
</ion-list>