8、迁移搜索功能至 Angular：构建动态用户界面

迁移搜索功能至 Angular：构建动态用户界面

1. 迁移搜索功能到 Angular 的动机与概述

将现有的搜索功能迁移到 Angular 有助于我们深入了解 Angular 的工作原理和基本概念。尽管 Angular 在动态用户界面方面表现出色，但通过使用它来解决现有问题，能更轻松地引入这项新技术，避免同时理解新特性和新技术的困扰。

我们将使用 Angular 重写现有的搜索功能。用户仍需输入关键字并点击提交按钮进行搜索，但搜索将由 Angular 驱动，而非浏览器提交表单。具体来说，我们会编写 JavaScript 代码，获取用户输入的搜索词，向服务器发送 Ajax 请求，接收 JSON 响应，并在不重新加载页面的情况下更新 DOM 显示搜索结果。

2. Angular 中的重要概念：组件

在 Angular 中，组件是最重要的概念。与之前版本的 Angular 以及许多其他前端框架将 JavaScript 应用视为一系列模型、视图和控制器不同，Angular 2 将应用视为一系列组件。组件可以看作是模型、视图和控制器的集合。在 Angular 2 中，一个组件至少包含一个视图模板和一个类，类中包含可供视图模板使用的数据和函数，组件可以在其选择器所在的任何位置使用。

3. 设置空组件

以下是设置空组件的具体步骤：
1. 替换 HTML 文件内容 ：将 app/views/customers/index.html 的内容替换为启动 Angular 应用所需的标记。假设创建的顶级组件名为 shine-customer-s