目錄
創(chuàng)建一個頁面組件
簡單了解裝飾器
在AppModule中注冊頁面
第一次展現(xiàn)
使用獨立的模板文件
一個APP中最基本的元素可謂是頁面了，所以當(dāng)我們創(chuàng)建了一個新的APP后，就應(yīng)該了解一下如何創(chuàng)建一個新頁面。
創(chuàng)建一個頁面組件
在 ionic 中，頁面是以組件(component)的形式存在的，每個頁面都是一個獨立的組件。我們現(xiàn)在需要建一個名為test的頁面，我們現(xiàn)在pages文件夾下新建一個文件夾，并創(chuàng)建一以 .ts 結(jié)尾的同名文件。
在 test.ts 中添加第一部分代碼
import { Component } from '@angular/core'
@Component({
selector: 'page-test',
template: `<h1>Hello World!</h1>`
})
export class TestPage {}
在這幾行代碼中，我們只做了一件事情，就是聲明了TestPage頁面類：
- export關(guān)鍵詞：將類暴露出去，以便其它的文件可以import到它。
- 類的命名：在ionic3中，頁面類采用頁面名+Page的命名方式，首字母大寫，如HomePage, ContactPage等。
簡單了解裝飾器
我們發(fā)現(xiàn)在類的聲明語句之前，有一串看似不明所以的代碼。它就是Component裝飾器，裝飾器(decorator)在ES6中是以@開頭的特殊的函數(shù)，可以動態(tài)地給類添加一些功能，在這里Component裝飾器就會根據(jù)傳入的配置對象，為頁面類賦予創(chuàng)建頁面視圖的功能。
而這里Component并非憑空出現(xiàn)的，而是文件的第一行，通過import語句將其導(dǎo)入進來的。
import { Component } from '@angular/core'
@angular/core是一個npm的模塊，定義了angular的核心功能，你可以在node_modules目錄下找到它。
我們在裝飾器中配置了兩個東西，selector和template：
- selector：為頁面指定選擇器的名稱，可以在css為組件使用特定的樣式，在ionic 3.x中規(guī)范為 page- 開頭，為了不造成混亂，需要保持每個頁面selector的唯一性。
<h1>Hello World!</h1>
- template : 模板的字符串，里面其實就是html代碼，它是最終展示在頁面上的內(nèi)容；這兒的字符串是用 ` 符號包裹的（就是esc下面那個），一來你可以自由地?fù)Q行，二來不會有引號轉(zhuǎn)義的問題，當(dāng)然在ES6中它有更重要的作用（參見末尾資料中的“模板字符串”）
在AppModule中注冊頁面
APPModule位于 src/app 目錄下的 app.module.ts中，APPModule是整個應(yīng)用的根模塊，它是一個大工廠，負(fù)責(zé)把所有我們要用的東西組裝在一起。我們要把新添加的頁面注冊到根模塊當(dāng)中，這只需要簡單的兩步：
1.引入TestPage頁面類，我們在文件的開頭部分，加上相關(guān)的語句，如果你是個對代碼整潔度有要求的人，你肯定是會加在已有的幾個頁面引入語句附近的：
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 { TestPage } from '../pages/test/test';
主意from后面的地址是不需要加 .ts 擴展名的，如果在編輯器或IDE中安裝了自動填充路徑的插件，很容易誤加后綴。
2.將TestPage分別加入declarations和entryComponents數(shù)組中：
@NgModule({
declarations: [
...
TabsPage,
TestPage
],
...
entryComponents: [
...
TabsPage,
TestPage
],
...
以說明TestPage是APP中需要用到的組件，而且是一個動態(tài)組件。
展現(xiàn)
我們尚不知道如何從已有的頁面中把test頁打開，我們用一個笨辦法來觀察我們剛剛創(chuàng)建的頁面，打開 pages/tabs/tabs.ts ，導(dǎo)入TestPage，并把 tab1Root 替換掉，讓應(yīng)用的首屏變成test頁面。
...
import { TestPage } from '../test/test';
...
export class TabsPage {
tab1Root = TestPage;
...
運行serve命令，打開本地服務(wù)器，得到了這樣的界面
使用獨立的模板文件
我們得到的顯然不是一個典型的APP頁面，現(xiàn)在我們再test文件夾下新建test.html
<ion-header>
<ion-navbar>
<ion-title>
Test
</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<h1>Hello World!</h1>
</ion-content>
這一段HTML代碼就是一個標(biāo)準(zhǔn)的ionic頁面結(jié)構(gòu)，很多標(biāo)簽都是ionic定制的，頁面分為頭部(ion-header)和主體(ionic-content)兩個部分，頭部包含了導(dǎo)航欄(ion-navbar)及標(biāo)題(ion-title)，而主體部分，就是我們自定義的內(nèi)容。
回到test.ts，把剛才裝飾器嵌入的模板代碼
template: `<h1>Hello World!</h1>`
替換為引入獨立模板文件的代碼
templateUrl:'./test.html'
注意這里包裹路徑的符號變成了單引號。
在發(fā)生改動之后，瀏覽器會自動刷新頁面，此時我們看到了現(xiàn)在的頁面：
總結(jié)
至此我們完成了一個頁面的創(chuàng)建，看似步驟有點多，但是熟練了以后這是一個非常快速的過程，總的說來一共就三步：
1.創(chuàng)建組件文件 .ts
2.在AppModule中注冊組件
3.創(chuàng)建模板文件 .html
第二步和第三步實際上是可以順序互換的。
下一章將會介紹頁面之間的跳轉(zhuǎn)，以及頁面棧原理。
參考資料
1.修飾器（ECMAScript6 入門）
2.模板字符串（ECMAScript6 入門）
