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