課程開始我們學(xué)習(xí)會(huì)很慢且很簡(jiǎn)單颓芭，只是專注創(chuàng)建應(yīng)用的基本布局横侦。我們需要給Home頁(yè)面創(chuàng)建模板挥萌，用來(lái)顯示所有創(chuàng)建的檢查列表绰姻，對(duì)于Checklist頁(yè)面，用于展示一個(gè)指定檢查列表的所有條目引瀑。如果你稍加留意的話狂芋，你就知道還有另一個(gè)頁(yè)面，這個(gè)的制作就是比較靠后的事情了憨栽。
如之前所說(shuō)帜矾，我會(huì)盡量使課程模組化，這樣制作應(yīng)用可以引起你的興趣屑柔，而不用強(qiáng)制遵循一個(gè)固定的順序屡萤。由于這是第一個(gè)應(yīng)用，也因?yàn)檫@是基本包里面唯一包含的原因掸宛，我會(huì)注意確保所有細(xì)節(jié)解釋清楚死陆。

Home頁(yè)面

在進(jìn)入代碼編寫之前，我們需要在腦中有一個(gè)清晰的視圖我們要制作什么樣子的一個(gè)東西（譯者：胸有成竹）唧瘾。一下是完成的home頁(yè)面的截圖：

主頁(yè)

可以看到它有一個(gè)很漂亮的樣式措译，這個(gè)我們后續(xù)會(huì)涉及，但是實(shí)際上他就是個(gè)很簡(jiǎn)單的列表劈愚，右上角有一個(gè)按鈕用來(lái)添加一個(gè)新的檢查列表瞳遍。雖然不是全部都簡(jiǎn)單，你會(huì)發(fā)現(xiàn)其中一個(gè)列表項(xiàng)有點(diǎn)不一樣菌羽，他有一個(gè)‘Edit’和‘Delete’按鈕掠械。這是因?yàn)槲覀儗⑹褂肐onic提供的滑動(dòng)列表組件，他允許我們指定在用戶滑動(dòng)列表項(xiàng)的時(shí)候展示一些內(nèi)容注祖。
那么猾蒂，我們開始制作吧。首先是晨，我們看一下整個(gè)模板里面的內(nèi)容肚菠，然后我們將他分成小塊來(lái)詳細(xì)討論：
> 修改src/pages/home/home.html為如下內(nèi)容

<ion-header>
    <ion-navbar color="secondary">
        <ion-title>
            <img src = "assets/images/logo.png" />
        </ion-title>
        <ion-buttons end>
            <button ion-button icon-only (click)="addChecklist()"><ion-icon name="add-circle"></ion-icon></button>
        </ion-buttons>
    </ion-navbar>
</ion-header>

<ion-content>
    <ion-list no-lines>
        <ion-item-sliding>
        <button ion-item (click)="viewChecklist(checklist)">
        TITLE GOES HERE
        <span>0 items</span>
        </button>
            <ion-item-options>
            <button ion-button icon-only color="light" (click)="renameChecklist(checklist)"><ion-icon        name="clipboard"></ion-icon> Edit</button>
            <button ion-button icon-only color="danger"  (click)="removeChecklist(checklist)"><ion-icon
            name="trash"></ion-icon> Delete</button>
            </ion-item-options>
        </ion-item-sliding>
    </ion-list>
</ion-content>

我們先開始討論<ion-header>部分：

<ion-header>
    <ion-navbar color="secondary">
        <ion-title>
        <img src = "assets/images/logo.png" />
            </ion-title>
        <ion-buttons end>
            <button ion-button icon-only (click)="addChecklist()"><ion-icon   name="add-circle"></ion-icon></button>
        </ion-buttons>
    </ion-navbar>
</ion-header>

<ion-navbar>允許我們添加一個(gè)頁(yè)首條到我們的應(yīng)用，可以持有一些按鈕罩缴，標(biāo)題甚至在需要的時(shí)候直接與Ionic的導(dǎo)航系統(tǒng)整合來(lái)顯示后退按鈕蚊逢。
我們給navbar添加了color屬性并制定為secondary顏色，此顏色定義在theme/variable.scss里面箫章。navbar里面我們用到一個(gè)<ion-title>烙荷，他基本上就是用來(lái)展示一個(gè)當(dāng)前頁(yè)面的文本標(biāo)題，展示logo檬寂。我們也用到了<ion-buttons>在navbar里面創(chuàng)建了一個(gè)按鈕终抽。通過(guò)指定end屬性，所有按鈕在iOS上都會(huì)排列在右邊，但是如果我們指定的是‘start’屬性昼伴，按鈕將會(huì)排列到左邊匾旭。記住，Ionic 2有平臺(tái)一致性編譯圃郊，所以在不同的運(yùn)行平臺(tái)上价涝，他默認(rèn)會(huì)展示到合適的位置上。
最后持舆，我們將按鈕放到<ion-buttons>里面飒泻。這個(gè)按鈕用到了一個(gè)圓形圖標(biāo)并添加了一個(gè)點(diǎn)擊處理器在點(diǎn)擊的時(shí)候調(diào)用home.ts里面的addChecklist()方法（現(xiàn)在還沒(méi)創(chuàng)建這個(gè)方法）。同時(shí)注意吏廉，我們給按鈕用了ion-button和icon-only屬性，這可以是Ionic知道我們將對(duì)按鈕使用Ionic樣式惰许，這個(gè)樣式將使按鈕只有圖標(biāo)沒(méi)有文本席覆。
我們現(xiàn)在來(lái)看列表部分：

<ion-content>
    <ion-list no-lines>
        <ion-item-sliding>
            <button ion-item (click)="viewChecklist(checklist)">
            TITLE GOES HERE
            <span>0 items</span>
            </button>
            <ion-item-options>
            <button ion-button icon-only color="light"   (click)="renameChecklist(checklist)"><ion-icon
            name="clipboard"></ion-icon> Edit</button>
            <button ion-button icon-only color="danger"  (click)="removeChecklist(checklist)"><ion-icon   name="trash"></ion-icon> Delete</button>
            </ion-item-options>
        </ion-item-sliding>
    </ion-list>
</ion-content>

在講解列表之前，我們先看到所有的東西都被包圍在<ion-content>里面 -- 這個(gè)標(biāo)簽用來(lái)持有頁(yè)面的主體內(nèi)容汹买，在大部分的案例中佩伤，所有navbar之外的內(nèi)容都將放在這里。
和純HTML創(chuàng)建的列表相比：

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

Ionic創(chuàng)建列表的方式基本上是一樣的：

<ion-list>
    <ion-item></ion-item>
    <ion-item></ion-item>
    <ion-item></ion-item>
</ion-list>

當(dāng)然晦毙，我們的看起來(lái)稍微復(fù)雜些生巡，所以我們來(lái)了解一下。第一個(gè)超出尋常的事物是我們家了一個(gè) no-lines屬性到<ion-list>见妒。和我們給navbar添加的secondary屬性一樣孤荣，這個(gè)屬性讓我們的列表里面的項(xiàng)不能顯示邊界。
接下來(lái)的有點(diǎn)棘手须揣，也就是我們?cè)O(shè)置滑動(dòng)項(xiàng)的地方盐股，和<ion-item>不同的是，我們用的是<ion-sliding-item>耻卡，由兩個(gè)部分的內(nèi)容組成 -- 列表項(xiàng)本身疯汁，和<ion-item-options>，這是是用戶滑動(dòng)列表項(xiàng)顯示的卵酪。
<ion-sliding-item>第一塊是普通的<ion-item>定義幌蚊，但是不是直接使用的<ion-item>我們使用的是<button ion-item>實(shí)際上是一個(gè)用來(lái)列表項(xiàng)樣式的按鈕。視覺(jué)上溃卡，這兩個(gè)方法基本上是一樣的溢豆，但是實(shí)際上在移動(dòng)應(yīng)用里任何非<button>和<a>元素的點(diǎn)擊處理器都會(huì)有一點(diǎn)點(diǎn)延遲。我們不喜歡延遲塑煎，所以我們用了按鈕沫换。
我們給按鈕附加的點(diǎn)擊處理器調(diào)用了一個(gè)viewChecklist函數(shù)同時(shí)也傳入了一個(gè)參數(shù)名為checklist。我們目前還沒(méi)有這個(gè)函數(shù)定義，但是實(shí)際上我們會(huì)根據(jù)一個(gè)數(shù)據(jù)數(shù)組創(chuàng)建大量的此類列表項(xiàng)讯赏。所以最終此處傳入的checklist將是點(diǎn)擊的想的引用（詳情后續(xù)講解）垮兑。
最后，我們的第二個(gè)代碼塊<ion-item-block>漱挎，簡(jiǎn)單的定義了在用戶滑動(dòng)列表項(xiàng)的時(shí)候的顯示內(nèi)容系枪。在本案例中我們只是加入了一個(gè)‘Edit’和‘Delte’按鈕，他們也會(huì)在調(diào)用函數(shù)的時(shí)候注入checklist引用（再次提醒磕谅，我們稍后創(chuàng)建這個(gè)原因私爷，目前他會(huì)引發(fā)問(wèn)題）。
這就是home頁(yè)面的所有內(nèi)容膊夹，我們現(xiàn)在去checklist頁(yè)面衬浑。

Checklist頁(yè)面

跟之前流程一樣，在學(xué)習(xí)之前我們先看看效果圖：

列表詳情頁(yè)

看起來(lái)跟之前那個(gè)差不多放刨，最起碼大部分看起來(lái)是這樣的工秩，但是還是有一些不同點(diǎn)姚垃。顯然执庐，我們有另外的一個(gè)按鈕玖瘸，一個(gè)返回按鈕用于返回主頁(yè)周拐。列表項(xiàng)旁邊有一個(gè)checkbox用于標(biāo)記一個(gè)項(xiàng)是否完成吃嘿，我們這里也設(shè)置了滑動(dòng)項(xiàng)切端。
再次磅轻，我們將添加模板代碼然后來(lái)講解：
> 修改 src/pages/checklist/checklist.html為以下：

<ion-header>
    <ion-navbar color="secondary">
    <ion-title>
        CHECKLIST TITLE
    </ion-title>
    <ion-buttons end>
    <button ion-button icon-only (click)="uncheckItems()"><ion-icon name="refresh-circle"></ion-icon></button>
    <button ion-button icon-only (click)="addItem()"><ion-icon  name="add-circle"></ion-icon></button>
    </ion-buttons>
    </ion-navbar>
</ion-header>
<ion-content>
<ion-list no-lines>
    <ion-item-sliding>
    <ion-item>
        <ion-label>ITEM TITLE</ion-label>
        <ion-checkbox [checked]="item.checked" (click)="toggleItem(item)">
        </ion-checkbox>
    </ion-item>
    <ion-item-options>
        <button ion-button icon-only color="light" (click)="renameItem(item)"><ion-icon name="clipboard"></ion-icon> Edit</button>
        <button ion-button icon-only color="danger"  (click)="removeItem(item)"><ion-icon name="trash"></ion-icon>
        Delete</button>
    </ion-item-options>
    </ion-item-sliding>
</ion-list>
</ion-content>

你已經(jīng)知道了navbar的如何工作的拐格，本次我們只是在<ion-buttons>里面新加入了一個(gè)按鈕掉分，他也使用了end屬性俭缓，這樣所有的項(xiàng)都會(huì)排列到右邊。本次我們將使用<ion-title>的傳統(tǒng)方式叉抡，顯示當(dāng)前展示的檢查列表（最起碼尔崔，我們馬上就會(huì)做這個(gè)）的標(biāo)題。按鈕也都有不同的點(diǎn)擊處理函數(shù)褥民，但是由于我們當(dāng)前是在ChecklistPage組件季春，這些函數(shù)都會(huì)在checklist.ts文件里面觸發(fā)（這個(gè)東西我們當(dāng)前也沒(méi)有創(chuàng)建）。
現(xiàn)在你也知道滑動(dòng)項(xiàng)怎么工作的消返，但是這次我們有一個(gè)<ion-checkbox>作為主體內(nèi)容载弄，當(dāng)他被點(diǎn)擊的時(shí)候他會(huì)觸發(fā)toggleItem()函數(shù)，這個(gè)函數(shù)稍后也會(huì)定義撵颊。注意宇攻，我們用來(lái)普通的<ion-item>來(lái)替代<button ion-item>，這是因?yàn)槲覀兪侵苯咏ocheckbox附加點(diǎn)擊處理器而不用附加到整個(gè)項(xiàng)倡勇。
這里也有一點(diǎn)新語(yǔ)法逞刷，我們靠近點(diǎn)看：

[checked]="item.checked"

如果某些東西被 [方括號(hào)] 包圍的話，因?yàn)檫@我們將在這個(gè)元素上修改一個(gè)屬性property，我們將設(shè)置引號(hào)里面包含的表達(dá)式expression夸浅，而不是字符串仑最。所以，在本案例中帆喇，我們將設(shè)置checked屬性到item.checked的值警医。目前我們還沒(méi)有創(chuàng)建一個(gè)item的引用所以現(xiàn)在是沒(méi)有任何作用的，但是后續(xù)會(huì)坯钦。這里需要重點(diǎn)記住的是方括號(hào)會(huì)評(píng)估引號(hào)里面的任何內(nèi)容预皇。我們想象一下你的組件的類里有如下定義：

this.myName = "Josh"

如果我如下使用：

<something myName="myName">

myName屬性attribute將被設(shè)為“myName”文本值，但是如果我們使用如下代碼的話：

<something [myName]="myName">

myName屬性property將被設(shè)置為‘Josh’婉刀，因?yàn)閙yName在此示例中將會(huì)評(píng)估（譯者：表達(dá)式估值）吟温。繼續(xù)，模板里沒(méi)有別的新玩意了 -- 我們簡(jiǎn)單的添加了‘Edit’和‘Delete’按鈕到滑動(dòng)列表突颊，就像上一個(gè)頁(yè)面一樣溯街。
如果現(xiàn)在運(yùn)行ionic serve，將會(huì)看到如下結(jié)果：

列表詳情頁(yè)

我想我們都會(huì)認(rèn)為這看起來(lái)好丑洋丐，但是結(jié)構(gòu)就在那里。請(qǐng)記住挥等，我們還沒(méi)有對(duì)logo指定樣式友绝，因此根據(jù)你使用何種尺寸的設(shè)備，他可能和上圖看起來(lái)不大一樣肝劲。
接下來(lái)的課程我們將給列表拉取真是數(shù)據(jù)并對(duì)他自定義樣式迁客，這樣他會(huì)看起來(lái)順眼些。Ionic 2的模板語(yǔ)法第一眼看起來(lái)可能會(huì)有點(diǎn)迷糊辞槐，但是一旦你熟悉了之后將會(huì)很好使用掷漱。