AngularJS 和 REST API - 第二部分

• 下载演示项目 - 1.5 MB

引言

在 AngularJS 和 REST API，第 1 部分 中，我介绍了一些 AngularJS 的概念，并演示了一个 REST API，用于从数据库表中获取项目并在网页上使用 AngularJS 显示它们。在第 2 部分中，我创建了一个应用程序，该应用程序使用 REST API 和 AngularJS 在网页上显示有关机场的信息。将使用两种方法来显示数据。第一种方法将类似于 AngularJS 和 REST API，第 1 部分 中使用的方法，第二种方法将使用 AngularJS 的 md-autocomplete 指令。与上一篇文章一样，假定读者熟悉 JavaScript、ASP.NET MVC、C#、Entity Framework、HTML、JSON 和 CSS。现在您已经熟悉了 AngularJS。您还需要一个 key 来访问 Bing 地图，可以从 Bing Maps 开发中心 免费获取。(本文仅使用 Bing 地图 API；Steve Wellens 有一篇很好的文章比较了 Google 和 Bing 地图 API。)

创建表

我这个项目的第一个目标是使用 Entity Framework 的 数据库优先 模型，以便使用名为 Airport 的现有数据库表来存储机场数据。要创建 Airport 表，请在 CreateAirportTable.sql 脚本中将 [YOUR_DATABASE_NAME] 更改为您数据库的名称，然后在 SQL Server Management Studio (SSMS) 中执行 CreateAirportTable.sql 脚本。创建表后，可以通过在 SSMS 中执行 AirportDataBaseLosAngeles.sql 脚本来填充它。该脚本应插入 163 行，每一行都包含单个机场的数据。为了使 Airport 表保持合理的演示大小，这是我从 https://openflights.org/data.html 获取的可用数据的一小部分。您也可以从其他来源获取机场数据，例如 FAA 网站。

要将现有表添加到项目，需要向项目添加 ADO.NET Entity Data Model。由于我已经完成了此操作，因此您只需将 Web.config 中的 AirportEntities 连接字符串更改为指向您的数据库，方法是将 [YOUR_SERVER_NAME] 和 [YOUR_DATABASE_NAME] 分别设置为您的服务器和数据库的名称。(请注意，有 两个不同的 Web.config 文件，但只有一个包含 AirportEntities 连接字符串。) 下面是一个片段，显示了 AirportEntities 连接 string 的样子

<connectionStrings>
        <add name="AirportEntities"  ... connectionString="source=[YOUR_SERVER_NAME];
         initial catalog=[YOUR_DATABASE_NAME] ... />
</connectionStrings>

Using the Code

下载 AirportDatabaseProject.zip 文件并解压缩。它包含一个名为 AngularJS_REST_API_AirportLocator 的目录，其中包含 JavaScript 和 HTML 文件、两个 SQL 脚本文件以及 Visual Studio 2015 项目 AirportsAPI。使用 Visual Studio 打开 AirportsAPI 项目。按 F6 生成它，项目应该可以成功生成而没有任何错误。

按 F5 键以调试模式运行 AirportsAPI 项目。您可能希望在此 C# 代码的关键部分（控制器）AirportController.cs 中放置一个断点。这是从 Airports 表中获取所有机场的 REST API。

[Route("api/Airports")]
[HttpGet]
public IEnumerable<Airport> GetAirports()
{
	try
	{
		var db = new AirportEntities();
		var airports = db.Airports.ToList().OrderBy(a => a.Name);
		return airports;
	}
	catch(Exception ex)
	{
		System.Diagnostics.Debug.WriteLine(String.Format("Error: {0}", ex.Message));
		return null;
	}
}

当 AirportsAPI 项目运行时，如果您安装了 curl 工具，可以像这样执行 API：curl -X GET https://:55213/api/Airports ，它应该返回所有机场作为 JSON 字符串。(URL 中的“55213”仅仅是端口 ID，通过项目属性中的“项目 URL”设置。) 还有一个 API 可以通过 ID 获取单个机场，curl -X GET https://:55213/api/Airport/23 。注意 URL 中的单数 Airport，以及 ID 23 包含在 URL 的末尾，因此它正在从我的数据库（我学习飞行的长滩）获取 ID 为 23 的机场。您应该得到此 JSON 作为响应

{"ID":23,"VendorID":3582,"Name":"Long Beach /Daugherty Field/ Airport",
"City":"Long Beach","Country":"United States","IATA":"LGB","ICAO":"KLGB"
-118.152000,"Altitude":60,"Timezone":-8.00,"DST":"A","TZ":"America/Los_Angeles",
"Type":"airport","Source":"OurAirports"}

使用 ng-repeat 和 ng-click

使用与 AngularJS 和 REST API，第 1 部分 中描述的相同技术，有两个主要的 JavaScript 文件来调用 REST API：app\airports\airportsController.js 和 app\airports\remoteAirportsService.js。右键单击 AirportLocaterApproach1.html，然后选择“在 Chrome 中打开”。(您可能还想打开 Chrome 的“开发者工具”窗口，以便查看任何错误消息。) 单击“所有机场”按钮会调用 fetchAirports 方法，该方法随后调用上面描述的 api/Airports API。此第一种方法使用 AngularJS 的 ng-repeat 指令和一个过滤器来选择名称中包含过滤器字符串“long”的所有机场，如下面的屏幕截图所示。

匹配的机场显示为 HTML 按钮，AngularJS 指令 ng-click 会导致单击按钮时调用 JavaScript 方法 showMap 并传递机场 ID

<input type="button" ng-click="showMap(singleAirport.ID)" 
value="{{ singleAirport.Name }}" class="btn-success" data-toggle="tooltip" 
title="Single Airport" id="singleairport">

单击“长滩/道格蒂菲尔德/机场”按钮将显示长滩机场的地图（请注意 Bing 地图如何提供缩放按钮）

使用 AngularJS 自动完成

我的第二个目标是使用 AngularJS 的 md-autocomplete 指令，该指令显示自定义查询的所有匹配项的下拉列表。在下面的图像中，显示了机场名称或城市名称中包含“Lo”的所有机场。

要实际查看此效果，请首先编辑 scripts\AutoCompleteController.js 并将 'YOUR CREDENTIALS' 替换为您的 Bing 密钥。在 Windows 资源管理器中，右键单击 AirportLocaterApproach2.html，然后选择“在 Chrome 中打开”。(您可能还想打开 Chrome 的“开发者工具”窗口，以便查看任何错误消息。) 页面应如上图所示，基本上由一个文本框组成，您可以在其中按名称或城市搜索机场。选择机场后，将会在 HTML 表中显示名称、城市、IATA 和 ICAO 代码、纬度、经度、海拔和时区。还将显示一个显示机场的地图，如下图所示，位于本文开头。

控制器 AutoCompleteController 在 AutoCompleteController.js 中的关键方法称为 filterFn，如果 REST API 调用获取的机场列表中有一个机场包含查询字符串，它将返回 true。(在代码中，我添加了注释来描述如何仅返回以查询字符串开头的机场，尽管我认为在这种情况下用处不大。)

我利用了 Steve Wellens 的 DragEnd 方法，使其能够拖动标记以确定跑道长度。在本文开头的图像中，您可以看到标记之间的距离，因此长滩机场 25R/7L 跑道的长度超过 5000 英尺。

版本 1.0.0.0