From 837efd026aa5b8f4c15bab1a904d76c550b856d2 Mon Sep 17 00:00:00 2001
From: wpz <412592375@qq.com>
Date: Sun, 29 Apr 2018 07:57:53 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E6=96=B0=E5=BB=BA=E4=B8=80=E4=B8=AAionicUI?=
 =?UTF-8?q?=20=E9=A1=B5=E9=9D=A2,=E6=B7=BB=E5=8A=A0=E5=88=B0tabs=E6=A0=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 readme.md                             | 11 +++++++++++
 src/app/app.module.ts                 |  7 +++++--
 src/pages/ionic-ui/ionic-ui.html      | 18 ++++++++++++++++++
 src/pages/ionic-ui/ionic-ui.module.ts | 13 +++++++++++++
 src/pages/ionic-ui/ionic-ui.scss      |  1 +
 src/pages/ionic-ui/ionic-ui.ts        | 25 +++++++++++++++++++++++++
 src/pages/tabs/tabs.html              |  1 +
 src/pages/tabs/tabs.ts                |  3 +++
 8 files changed, 77 insertions(+), 2 deletions(-)
 create mode 100644 src/pages/ionic-ui/ionic-ui.html
 create mode 100644 src/pages/ionic-ui/ionic-ui.module.ts
 create mode 100644 src/pages/ionic-ui/ionic-ui.scss
 create mode 100644 src/pages/ionic-ui/ionic-ui.ts

diff --git a/readme.md b/readme.md
index f59c335..a2d1393 100644
--- a/readme.md
+++ b/readme.md
@@ -17,3 +17,14 @@ cd myApp
 ionic serve
 ```
 
+
+
+*****
+
+新建一个ionicUI 页面
+
+```
+ionic g page ionicUI
+```
+
+添加到tabs栏
\ No newline at end of file
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index e2c9d8d..a0a8c97 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -7,6 +7,7 @@ import { AboutPage } from '../pages/about/about';
 import { ContactPage } from '../pages/contact/contact';
 import { HomePage } from '../pages/home/home';
 import { TabsPage } from '../pages/tabs/tabs';
+import { IonicUiPage } from '../pages/ionic-ui/ionic-ui';
 
 import { StatusBar } from '@ionic-native/status-bar';
 import { SplashScreen } from '@ionic-native/splash-screen';
@@ -17,7 +18,8 @@ import { SplashScreen } from '@ionic-native/splash-screen';
     AboutPage,
     ContactPage,
     HomePage,
-    TabsPage
+    TabsPage,
+    IonicUiPage
   ],
   imports: [
     BrowserModule,
@@ -29,7 +31,8 @@ import { SplashScreen } from '@ionic-native/splash-screen';
     AboutPage,
     ContactPage,
     HomePage,
-    TabsPage
+    TabsPage,
+    IonicUiPage
   ],
   providers: [
     StatusBar,
diff --git a/src/pages/ionic-ui/ionic-ui.html b/src/pages/ionic-ui/ionic-ui.html
new file mode 100644
index 0000000..ee7aa25
--- /dev/null
+++ b/src/pages/ionic-ui/ionic-ui.html
@@ -0,0 +1,18 @@
+<!--
+  Generated template for the IonicUiPage page.
+
+  See http://ionicframework.com/docs/components/#navigation for more info on
+  Ionic pages and navigation.
+-->
+<ion-header>
+
+  <ion-navbar>
+    <ion-title>ionicUI</ion-title>
+  </ion-navbar>
+
+</ion-header>
+
+
+<ion-content padding>
+
+</ion-content>
diff --git a/src/pages/ionic-ui/ionic-ui.module.ts b/src/pages/ionic-ui/ionic-ui.module.ts
new file mode 100644
index 0000000..3a560c8
--- /dev/null
+++ b/src/pages/ionic-ui/ionic-ui.module.ts
@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { IonicPageModule } from 'ionic-angular';
+import { IonicUiPage } from './ionic-ui';
+
+@NgModule({
+  declarations: [
+    IonicUiPage,
+  ],
+  imports: [
+    IonicPageModule.forChild(IonicUiPage),
+  ],
+})
+export class IonicUiPageModule {}
diff --git a/src/pages/ionic-ui/ionic-ui.scss b/src/pages/ionic-ui/ionic-ui.scss
new file mode 100644
index 0000000..3e89dfb
--- /dev/null
+++ b/src/pages/ionic-ui/ionic-ui.scss
@@ -0,0 +1 @@
+page-ionic-ui {}
diff --git a/src/pages/ionic-ui/ionic-ui.ts b/src/pages/ionic-ui/ionic-ui.ts
new file mode 100644
index 0000000..312019e
--- /dev/null
+++ b/src/pages/ionic-ui/ionic-ui.ts
@@ -0,0 +1,25 @@
+import { Component } from '@angular/core';
+import { IonicPage, NavController, NavParams } from 'ionic-angular';
+
+/**
+ * Generated class for the IonicUiPage page.
+ *
+ * See https://ionicframework.com/docs/components/#navigation for more info on
+ * Ionic pages and navigation.
+ */
+
+@IonicPage()
+@Component({
+  selector: 'page-ionic-ui',
+  templateUrl: 'ionic-ui.html',
+})
+export class IonicUiPage {
+
+  constructor(public navCtrl: NavController, public navParams: NavParams) {
+  }
+
+  ionViewDidLoad() {
+    console.log('ionViewDidLoad IonicUiPage');
+  }
+
+}
diff --git a/src/pages/tabs/tabs.html b/src/pages/tabs/tabs.html
index fa3921a..500dcb8 100644
--- a/src/pages/tabs/tabs.html
+++ b/src/pages/tabs/tabs.html
@@ -2,4 +2,5 @@
   <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
   <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle"></ion-tab>
   <ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion-tab>
+  <ion-tab [root]="tab4Root" tabTitle="IonicUI" tabIcon="ionic"></ion-tab>
 </ion-tabs>
diff --git a/src/pages/tabs/tabs.ts b/src/pages/tabs/tabs.ts
index f80301b..d1195ec 100644
--- a/src/pages/tabs/tabs.ts
+++ b/src/pages/tabs/tabs.ts
@@ -3,6 +3,7 @@ import { Component } from '@angular/core';
 import { AboutPage } from '../about/about';
 import { ContactPage } from '../contact/contact';
 import { HomePage } from '../home/home';
+import { IonicUiPage } from '../ionic-ui/ionic-ui';
 
 @Component({
   templateUrl: 'tabs.html'
@@ -12,6 +13,8 @@ export class TabsPage {
   tab1Root = HomePage;
   tab2Root = AboutPage;
   tab3Root = ContactPage;
+  tab4Root = IonicUiPage;
+
 
   constructor() {
 
-- 
Gitee


From 04f010d55fdfbfa323642a2cc77f76facd0f609a Mon Sep 17 00:00:00 2001
From: wpz <412592375@qq.com>
Date: Sun, 29 Apr 2018 08:55:43 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E6=96=B0=E5=BB=BA=E4=B8=80=E4=B8=AAui=20?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E5=B9=B6=E6=B7=BB=E5=8A=A0=E5=88=B0ionic?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 readme.md                           | 19 +++++++++++++++++--
 src/app/app.module.ts               |  4 +++-
 src/components/components.module.ts |  8 ++++++++
 src/components/ui/ui.html           |  4 ++++
 src/components/ui/ui.scss           |  3 +++
 src/components/ui/ui.ts             | 22 ++++++++++++++++++++++
 src/pages/ionic-ui/ionic-ui.html    |  1 +
 7 files changed, 58 insertions(+), 3 deletions(-)
 create mode 100644 src/components/components.module.ts
 create mode 100644 src/components/ui/ui.html
 create mode 100644 src/components/ui/ui.scss
 create mode 100644 src/components/ui/ui.ts

diff --git a/readme.md b/readme.md
index a2d1393..9efb774 100644
--- a/readme.md
+++ b/readme.md
@@ -21,10 +21,25 @@ ionic serve
 
 *****
 
-新建一个ionicUI 页面
+### 新建一个ionicUI 页面
 
 ```
 ionic g page ionicUI
 ```
 
-添加到tabs栏
\ No newline at end of file
+### 添加到tabs栏
+
+***********
+
+### 新建一个ionicUI 页面
+
+```
+ionic g component ui
+```
+
+并在ionicUI页面上引入使用<ui></ui>
+
+
+
+******
+
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index a0a8c97..7a3e346 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -1,5 +1,6 @@
 import { NgModule, ErrorHandler } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
+import { ComponentsModule } from '../components/components.module';
 import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
 import { MyApp } from './app.component';
 
@@ -23,7 +24,8 @@ import { SplashScreen } from '@ionic-native/splash-screen';
   ],
   imports: [
     BrowserModule,
-    IonicModule.forRoot(MyApp)
+    IonicModule.forRoot(MyApp),
+    ComponentsModule
   ],
   bootstrap: [IonicApp],
   entryComponents: [
diff --git a/src/components/components.module.ts b/src/components/components.module.ts
new file mode 100644
index 0000000..807fc58
--- /dev/null
+++ b/src/components/components.module.ts
@@ -0,0 +1,8 @@
+import { NgModule } from '@angular/core';
+import { UiComponent } from './ui/ui';
+@NgModule({
+	declarations: [UiComponent],
+	imports: [],
+	exports: [UiComponent]
+})
+export class ComponentsModule {}
diff --git a/src/components/ui/ui.html b/src/components/ui/ui.html
new file mode 100644
index 0000000..3511012
--- /dev/null
+++ b/src/components/ui/ui.html
@@ -0,0 +1,4 @@
+<!-- Generated template for the UiComponent component -->
+<div>
+  {{text}}
+</div>
diff --git a/src/components/ui/ui.scss b/src/components/ui/ui.scss
new file mode 100644
index 0000000..5c2c16f
--- /dev/null
+++ b/src/components/ui/ui.scss
@@ -0,0 +1,3 @@
+ui {
+
+}
diff --git a/src/components/ui/ui.ts b/src/components/ui/ui.ts
new file mode 100644
index 0000000..abcd2d3
--- /dev/null
+++ b/src/components/ui/ui.ts
@@ -0,0 +1,22 @@
+import { Component } from '@angular/core';
+
+/**
+ * Generated class for the UiComponent component.
+ *
+ * See https://angular.io/api/core/Component for more info on Angular
+ * Components.
+ */
+@Component({
+  selector: 'ui',
+  templateUrl: 'ui.html'
+})
+export class UiComponent {
+
+  text: string;
+
+  constructor() {
+    console.log('Hello UiComponent Component');
+    this.text = 'Hello World';
+  }
+
+}
diff --git a/src/pages/ionic-ui/ionic-ui.html b/src/pages/ionic-ui/ionic-ui.html
index ee7aa25..de99535 100644
--- a/src/pages/ionic-ui/ionic-ui.html
+++ b/src/pages/ionic-ui/ionic-ui.html
@@ -14,5 +14,6 @@
 
 
 <ion-content padding>
+  <ui></ui>
 
 </ion-content>
-- 
Gitee