Simpler

Author: mlynch

src/app/app.component.spec.ts

@@ -1,6 +1,9 @@
 import { async, TestBed } from '@angular/core/testing';
 import { IonicModule } from 'ionic-angular';
 
+import { StatusBar } from '@ionic-native/status-bar';
+import { SplashScreen } from '@ionic-native/splash-screen';
+
 import { MyApp } from './app.component';
 
 describe('MyApp Component', () => {
@@ -12,6 +15,10 @@ describe('MyApp Component', () => {
       declarations: [MyApp],
       imports: [
         IonicModule.forRoot(MyApp)
+      ],
+      providers: [
+        StatusBar,
+        SplashScreen
       ]
     })
   }));

src/app/app.component.ts

@@ -1,23 +1,45 @@
-import { Component } from '@angular/core';
-import { Platform } from 'ionic-angular';
+import { Component, ViewChild } from '@angular/core';
+import { Nav, Platform } from 'ionic-angular';
 import { StatusBar } from '@ionic-native/status-bar';
 import { SplashScreen } from '@ionic-native/splash-screen';
 
-import { HomePage } from '../pages/home/home';
+import { Page1 } from '../pages/page1/page1';
+import { Page2 } from '../pages/page2/page2';
 
 
 @Component({
   templateUrl: 'app.html'
 })
 export class MyApp {
-  rootPage = HomePage;
+  @ViewChild(Nav) nav: Nav;
 
-  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
-    platform.ready().then(() => {
+  rootPage: any = Page1;
+
+  pages: Array<{title: string, component: any}>;
+
+  constructor(public platform: Platform, public statusBar: StatusBar, public splashScreen: SplashScreen) {
+    this.initializeApp();
+
+    // used for an example of ngFor and navigation
+    this.pages = [
+      { title: 'Page One', component: Page1 },
+      { title: 'Page Two', component: Page2 }
+    ];
+
+  }
+
+  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();
-      splashScreen.hide();
+      this.statusBar.styleDefault();
+      this.splashScreen.hide();
     });
   }
+
+  openPage(page) {
+    // Reset the content nav to have just this page
+    // we wouldn't want the back button to show in this scenario
+    this.nav.setRoot(page.component);
+  }
 }

src/app/app.module.ts

@@ -1,23 +1,27 @@
 import { NgModule, ErrorHandler } from '@angular/core';
 import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
 import { MyApp } from './app.component';
-import { HomePage } from '../pages/home/home';
+
+import { Page1 } from '../pages/page1/page1';
+import { Page2 } from '../pages/page2/page2';
 
 import { StatusBar } from '@ionic-native/status-bar';
 import { SplashScreen } from '@ionic-native/splash-screen';
 
 @NgModule({
   declarations: [
     MyApp,
-    HomePage
+    Page1,
+    Page2
   ],
   imports: [
     IonicModule.forRoot(MyApp)
   ],
   bootstrap: [IonicApp],
   entryComponents: [
     MyApp,
-    HomePage
+    Page1,
+    Page2
   ],
   providers: [
     StatusBar,

src/pages/home/home.html

@@ -0,0 +1,18 @@
+<ion-header>
+  <ion-navbar>
+    <button ion-button menuToggle>
+      <ion-icon name="menu"></ion-icon>
+    </button>
+    <ion-title>Page One</ion-title>
+  </ion-navbar>
+</ion-header>
+
+<ion-content padding>
+  <h3>Ionic Menu Starter</h3>
+
+  <p>
+    If you get lost, the <a href="http://ionicframework.com/docs/v2">docs</a> will show you the way.
+  </p>
+
+  <button ion-button secondary menuToggle>Toggle Menu</button>
+</ion-content>

src/pages/home/home.scss

@@ -0,0 +1,3 @@
+page-page1 {
+
+}

src/pages/page1/page1.html

@@ -0,0 +1,38 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By }           from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+import { Page1 } from "./page1";
+import { IonicModule, NavController } from "ionic-angular/index";
+
+describe('Page1', function () {
+  let de: DebugElement;
+  let comp: Page1;
+  let fixture: ComponentFixture<Page1>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ Page1 ],
+      imports: [
+        IonicModule.forRoot(Page1)
+      ],
+      providers: [
+        NavController
+      ]
+    });
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(Page1);
+    comp = fixture.componentInstance;
+    de = fixture.debugElement.query(By.css('h3'));
+  });
+
+  it('should create component', () => expect(comp).toBeDefined() );
+
+  it('should have expected <h3> text', () => {
+    fixture.detectChanges();
+    const h3 = de.nativeElement;
+    expect(h3.innerText).toMatch(/ionic/i,
+      '<h3> should say something about "Ionic"');
+  });
+});

src/pages/page1/page1.scss

@@ -3,10 +3,10 @@ import { Component } from '@angular/core';
 import { NavController } from 'ionic-angular';
 
 @Component({
-  selector: 'page-home',
-  templateUrl: 'home.html'
+  selector: 'page-page1',
+  templateUrl: 'page1.html'
 })
-export class HomePage {
+export class Page1 {
 
   constructor(public navCtrl: NavController) {
 

src/pages/page1/page1.spec.ts

@@ -0,0 +1,23 @@
+<ion-header>
+  <ion-navbar>
+    <button ion-button menuToggle>
+      <ion-icon name="menu"></ion-icon>
+    </button>
+    <ion-title>Page Two</ion-title>
+  </ion-navbar>
+</ion-header>
+
+<ion-content>
+  <ion-list>
+    <button ion-item *ngFor="let item of items" (click)="itemTapped($event, item)">
+      <ion-icon [name]="item.icon" item-left></ion-icon>
+      {{item.title}}
+      <div class="item-note" item-right>
+        {{item.note}}
+      </div>
+    </button>
+  </ion-list>
+  <div *ngIf="selectedItem" padding>
+    You navigated here from <b>{{selectedItem.title}}</b>
+  </div>
+</ion-content>