创建新项目

接下来我们将要开发的项目是一个允许访客搜索鸡尾酒的应用程序。这需要一个包含大量酒精饮料的数据库。幸运的是，我们可以使用一些API来查询鸡尾酒列表。在本项目中，我们将使用名为“Cocktail DB”的服务，它是完全免费的。

有关该API的更多信息请参见此处。

本项目将涵盖多个主题，主要目标是学习以下内容：

• 服务（Services）
• 执行HTTP请求
• 安全性
• RxJS

新项目

如果你在本地运行代码，请执行以下命令：

1ng new cocktails

在设置过程中，CLI会提示你配置项目。默认设置即可，我们不需要路由功能。

安装Bootstrap

项目创建完成后，进入新生成的目录并安装Bootstrap。我们将使用它来处理样式。可以运行以下命令安装Bootstrap：

1npm i bootstrap

我们需要更新 styles.css 文件以导入Bootstrap样式：

1@import "bootstrap/dist/css/bootstrap.css";

项目架构

项目的整体结构将保持简单。我们将有一个用于搜索的表单和一个用于显示结果列表的表格。为了保持代码整洁，建议将这两个部分分别放入独立的组件中。项目架构如下所示：

现在我们来创建承载表单和结果的组件。在命令行中运行以下命令生成表单组件：

1ng generate component form

再运行以下命令生成结果组件：

1ng generate component results

接下来，我们在组件模板中添加一些HTML代码，使界面更具吸引力。在 form.component.html 模板文件中添加如下内容：

1<div class="card mt-3">
2  <div class="card-body">
3    <form class="input-group mb-3">
4      <input type="text" class="form-control">
5      <div class="input-group-append">
6        <button class="btn btn-primary" type="submit">搜索</button>
7      </div>
8    </form>
9  </div>
10</div>

目前我们暂不使用任何指令或数据绑定，仅借助Bootstrap的类来实现基本视觉效果。

然后更新 results.component.html 模板文件：

1<table class="table">
2  <thead>
3    <tr>
4      <th>酒品</th>
5      <th>制作说明</th>
6    </tr>
7  </thead>
8  <tbody>
9    <tr>
10      <td>伏特加</td>
11      <td>这里是一些制作说明。</td>
12    </tr>
13  </tbody>
14</table>

最后，在 app.component.html 模板文件中加载这两个组件：

1<div class="container">
2  <app-form></app-form>
3  <app-results></app-results>
4</div>

我们无需手动导入或注册组件，Angular在生成组件时已自动完成这些操作。

这就是我们即将开发的项目。在接下来的几节课中，我们将逐步让其具备实际功能。