Add search page

app/src/app/app.component.ts

@@ -4,6 +4,7 @@ import { StatusBar } from '@ionic-native/status-bar';
 import { SplashScreen } from '@ionic-native/splash-screen';
 
 import { HomePage } from '../pages/home/home';
+import { SearchPage } from '../pages/search/search';
 import { SettingsPage } from '../pages/settings/settings';
 
 @Component({
@@ -14,7 +15,7 @@ export class MyApp {
 
   rootPage: any = HomePage;
 
-  pages: Array<{ title: string, icon:string, component: any }>;
+  pages: Array<{ title: string, icon: string, component: any }>;
 
   constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
     platform.ready().then(() => {
@@ -26,6 +27,7 @@ export class MyApp {
 
     this.pages = [
       { title: 'Home', icon: 'home', component: HomePage },
+      { title: 'Search', icon: 'search', component: SearchPage },
       { title: 'Settings', icon: 'settings', component: SettingsPage }
     ];
   }

app/src/app/app.html

@@ -1,19 +1,19 @@
 <ion-menu [content]="content">
-    <ion-header>
-      <ion-toolbar>
-        <ion-title>Menu</ion-title>
-      </ion-toolbar>
-    </ion-header>
-  
-    <ion-content>
-      <ion-list>
-        <button menuClose ion-item icon-start *ngFor="let page of pages" (click)="openPage(page)">
-            <ion-icon name="{{page.icon}}"></ion-icon>{{page.title}}
-        </button>
-      </ion-list>
-    </ion-content>
-  
-  </ion-menu>
-  
-  <!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
-  <ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>
+  <ion-header>
+    <ion-toolbar>
+      <ion-title>Menu</ion-title>
+    </ion-toolbar>
+  </ion-header>
+
+  <ion-content>
+    <ion-list>
+      <button menuClose ion-item icon-start *ngFor="let page of pages" (click)="openPage(page)">
+        <ion-icon name="{{page.icon}}"></ion-icon>{{page.title}}
+      </button>
+    </ion-list>
+  </ion-content>
+
+</ion-menu>
+
+<!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
+<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

app/src/app/app.module.ts

@@ -6,12 +6,14 @@ import { StatusBar } from '@ionic-native/status-bar';
 
 import { MyApp } from './app.component';
 import { HomePage } from '../pages/home/home';
+import { SearchPage } from '../pages/search/search';
 import { SettingsPage } from '../pages/settings/settings';
 
 @NgModule({
   declarations: [
     MyApp,
     HomePage,
+    SearchPage,
     SettingsPage
   ],
   imports: [
@@ -22,12 +24,13 @@ import { SettingsPage } from '../pages/settings/settings';
   entryComponents: [
     MyApp,
     HomePage,
+    SearchPage,
     SettingsPage
   ],
   providers: [
     StatusBar,
     SplashScreen,
-    {provide: ErrorHandler, useClass: IonicErrorHandler}
+    { provide: ErrorHandler, useClass: IonicErrorHandler }
   ]
 })
-export class AppModule {}
+export class AppModule { }

app/src/pages/home/home.html

@@ -10,6 +10,7 @@
 <ion-content padding>
   The world is your oyster.
   <p>
-    If you get lost, the <a href="http://ionicframework.com/docs/v2">docs</a> will be your guide.
+    If you get lost, the
+    <a href="http://ionicframework.com/docs/v2">docs</a> will be your guide.
   </p>
-</ion-content>
+</ion-content>

app/src/pages/search/search.html

@@ -0,0 +1,12 @@
+<ion-header>
+    <ion-navbar>
+        <button ion-button menuToggle>
+            <ion-icon name="menu"></ion-icon>
+        </button>
+        <ion-title>Search</ion-title>
+    </ion-navbar>
+</ion-header>
+
+<ion-content padding>
+    <p>Search...</p>
+</ion-content>

app/src/pages/search/search.ts

@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+import { NavController } from 'ionic-angular';
+
+@Component({
+    selector: 'page-search',
+    templateUrl: 'search.html'
+})
+export class SearchPage {
+
+    constructor(public navCtrl: NavController) {
+
+    }
+
+}

app/src/pages/settings/settings.html

@@ -1,13 +1,12 @@
 <ion-header>
-    <ion-navbar>
-      <button ion-button menuToggle>
-        <ion-icon name="menu"></ion-icon>
-      </button>
-      <ion-title>Settings</ion-title>
-    </ion-navbar>
-  </ion-header>
-  
-  <ion-content padding>
-    <p>Settings...</p>
-  </ion-content>
-  
+  <ion-navbar>
+    <button ion-button menuToggle>
+      <ion-icon name="menu"></ion-icon>
+    </button>
+    <ion-title>Settings</ion-title>
+  </ion-navbar>
+</ion-header>
+
+<ion-content padding>
+  <p>Settings...</p>
+</ion-content>