“單頁應(yīng)用程序”是一個網(wǎng)頁應(yīng)用程序，存在于單個HTML頁面中。根據(jù)用戶使用該應(yīng)用程序的導(dǎo)航需要，已在應(yīng)用程序中增加“views”，并從DOM中移除。一個單頁應(yīng)用程序的布局是尤其適合于移動應(yīng)用程序的：

沒有刷新頁面提供了一個更流暢和更接近于本地化的體驗。
用戶界面是完全在客戶端創(chuàng)建的，而不依賴于服務(wù)器創(chuàng)建用戶界面，使其成為脫機工作應(yīng)用程序的理想架構(gòu)。

在本單元中，我們設(shè)置基本的下部構(gòu)造將員工目錄轉(zhuǎn)為單頁應(yīng)用程序。

步驟

1、在index.html中：在主體標(biāo)簽內(nèi)刪除HTML標(biāo)記（伴隨有腳本標(biāo)簽異常）。

2、將立即執(zhí)行函數(shù)添加到app.js內(nèi)，定義一個命名為renderHomeView()的函數(shù)（剛好在findByName函數(shù)之后）。執(zhí)行函數(shù)以編程方式增加Home View標(biāo)記到主體元素。

function renderHomeView() {
    var html =
      "<h1>Directory</h1>" +
      "<input class='search-key' type='search' placeholder='Enter name'/>" +
      "<ul class='employee-list'></ul>";
    $('body').html(html);
    $('.search-key').on('keyup', findByName);
}

3、修改數(shù)據(jù)服務(wù)的初始化邏輯：當(dāng)服務(wù)已經(jīng)成功地初始化后，調(diào)用renderHomeView()函數(shù)以程序化顯示Home View。

var service = new EmployeeService();
service.initialize().done(function () {
    renderHomeView();
});

4、由于你已經(jīng)移動注冊的KeyUp事件到renderHomeView()函數(shù)中，確保你在事件注冊（Event Registration）部分移除原來的事件注冊。

5、由于Help按鈕已不在該位置，對Help按鈕移除點擊事件處理器（在10:27注冊部分）。

6、測試應(yīng)用程序。

確保你沒有忽略上述第4和第5步，否則你可能運行到難以跟蹤的問題，這與本教程中后續(xù)講解的事件觸發(fā)兩次有關(guān)。

上一篇：執(zhí)行視圖路由下一篇：使用本地通知