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

• 沒有刷新頁面提供了一個更流暢和更接近于本地化的體驗。

• 用戶界面是完全在客戶端創(chuàng)建的，而不依賴于服務器創(chuàng)建用戶界面，使其成為脫機工作應用程序的理想架構。

在本單元中，我們設置基本的下部構造將員工目錄轉為單頁應用程序。

步驟

1、在index.html中：在主體標簽內刪除HTML標記（伴隨有腳本標簽異常）。

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

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、修改數據服務的初始化邏輯：當服務已經成功地初始化后，調用renderHomeView()函數以程序化顯示Home View。

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

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

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

6、測試應用程序。

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