“单页应用程序”是一个网页应用程序，存在于单个HTML页面中。根据用户使用该应用程序的导航需要，已在应用程序中增加“views”，并从DOM中移除。一个单页应用程序的布局是尤其适合于移动应用程序的：

• 没有刷新页面提供了一个更流畅和更接近于本地化的体验。

• 用户界面是完全在客户端创建的，而不依赖于服务器创建用户界面，使其成为脱机工作应用程序的理想架构。

在本单元中，我们设置基本的下部构造将员工目录转为单页应用程序。

步骤

1、在index.html中：在主体标签内删除HTML标记（伴随有脚本标签异常）。

2、将立即执行函数添加到app.js内，定义一个命名为renderHomeView()的函数（刚好在findByName函数之后）。执行函数以编程方式增加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);
}

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

4、由于你已经移动注册的KeyUp事件到renderHomeView()函数中，确保你在事件注册（Event Registration）部分移除原来的事件注册。

5、由于Help按钮已不在该位置，对Help按钮移除点击事件处理器（在10:27注册部分）。

6、测试应用程序。

确保你没有忽略上述第4和第5步，否则你可能运行到难以跟踪的问题，这与本教程中后续讲解的事件触发两次有关。