8、使用 Angular 重构搜索功能

使用 Angular 重构搜索功能

在开发中，将现有的搜索功能迁移到 Angular 框架是一个不错的学习方式，它能让我们深入了解 Angular 的工作原理和基本概念。下面将详细介绍如何使用 Angular 重构搜索功能。

迁移搜索功能到 Angular

虽然 Angular 在动态用户界面方面表现出色，但通过使用它来解决现有问题，往往更容易引入这项新技术。这样，我们就无需同时费力理解新特性和新技术。我们将使用 Angular 重写现有的搜索功能，用户仍然可以输入关键字并点击提交按钮进行搜索，但搜索将由 Angular 驱动，而不是通过浏览器提交表单。

具体步骤如下：
1. 编写 JavaScript 代码，获取用户输入的搜索词。
2. 向服务器提交 Ajax 请求。
3. 接收 JSON 响应。
4. 在不重新加载页面的情况下，使用搜索结果更新 DOM。

Angular 中的组件概念

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

设置空组件

以下是设置空组件的具体步骤：
1. 替换 HTML 文件内容 ：将 app/views/customers/index.ht