AngularJS 和 REST API: 第三部分

• 下载演示项目 - 6.4 KB

引言

在 AngularJS 和 REST API，第二部分 中，我创建了一个机场数据库表，并演示了 AngularJS 的 md-autocomplete 指令，该指令显示一个下拉列表，其中包含所有符合机场名称查询的匹配项。在第三部分中，我将演示 md-tab 和 md-list-item 指令，通过获取指定矩形区域内的所有机场，并在两个 AngularJS 选项卡中显示它们。第一个选项卡包含机场列表，第二个选项卡包含地图（地图显示在此文章开头的截图中 - 注意大写的 MAP 字样和红色的下划线，表示它是选定的选项卡）。

Using the Code

下载 zip 文件并解压。它包含以下文件：AirportLocaterApproach3.html、ListController.js 和 AirportController.cs。在构建项目之前，您需要完成三项任务。首先，用此更新版本替换您从 AngularJS 和 REST API，第二部分 下载的项目中的 AirportController.cs。其次，将 AirportLocaterApproach3.html 复制到 AngularJS_REST_API_AirportLocator 目录，并将 ListController.js 复制到 AngularJS_REST_API_AirportLocator\scripts 目录。使用 Visual Studio 打开 AirportsAPI 项目。清理解决方案，然后按 F6 构建它；项目应该可以成功构建而没有任何错误。第三，与第二部分一样，您需要在 ListController.js 中将 'YOUR CREDENTIALS' 更改为您的 Bing 凭据。并且如第二部分所述，请记住在 Web.config 中更改 AirportEntities 连接字符串，通过分别设置 [YOUR_SERVER_NAME] 和 [YOUR_DATABASE_NAME] 为您的服务器名称和数据库名称来指向您的数据库。

API

AirportController.cs 中有两个新方法，用于完成从数据库中获取位于矩形区域内的所有机场的任务。请注意，这两个方法名称相同，都叫 AirportsByRect，但具有不同的 签名。我将在下面描述它们之间的区别。请注意，它们都调用一个名为 GetAirportsByRect 的方法来执行从数据库获取数据的实际工作。

[Route("api/AirportsByRect/{northLatitude}/{westLongitude}/{southLatitude}/{eastLongitude}")]
[HttpGet]
public IEnumerable<Airport> AirportsByRect
  (decimal northLatitude, decimal westLongitude, decimal southLatitude, decimal eastLongitude)
{
	IEnumerable<Airport> airports = GetAirportsByRect
            (northLatitude, westLongitude, southLatitude, eastLongitude);
	return airports;
}

[Route("api/AirportsByRect/{values}")]
[HttpGet]
public IEnumerable<Airport> AirportsByRect([FromUri] GeoRectangle location)
{
	IEnumerable<Airport> airports = GetAirportsByRect(location.NorthLatitude, 
               location.WestLongitude, location.SouthLatitude, location.EastLongitude);
	return airports;
}

当 AirportsAPI 项目运行时，您可以通过以下两种方式之一从 DOS 命令提示符使用 curl 实用程序执行上述 API：

curl -X GET https://:55213/api/AirportsByRect/34.4/-119.3/33.7/-117.9/

或

curl -X GET https://:55213/api/AirportsByRect/values/?
NorthLatitude=34.4^&WestLongitude=-119.3^&SouthLatitude=33.7^&EastLongitude=-117.9

请注意，第一种方法使用描述 URI 模式的路由模板，第二种方法使用查询字符串。在查询字符串中，我们用插入符转义了 ampersand。这两种方法都会返回矩形区域内的所有机场，格式为 JSON 字符串。

您还可以使用 Postman 来构建请求和读取响应；下面是使用 Postman 显示返回的 JSON 的屏幕截图。

使用 md-tab 和 md-list

新的 AirportLocaterApproach3.html 包含一个表单，您可以使用它输入描述感兴趣区域矩形的纬度和经度。（回想一下，从 第二部分 中，数据库表中的机场位于美国西海岸）。单击“获取机场”按钮会调用新 ListController.js 文件中的 frmGetLatLonRectangle 方法，该方法接着会调用上面描述的第一个 API 来获取指定矩形区域内的机场。注意 HTML 中 AngularJS 的 ng-submit 指令： ng-submit="getLatLonRectangle(frmGetLatLonRectangle)"

在 html 文件中，从 md-content 指令开始，有 AngularJS md-tab 指令，它创建了两个选项卡，第一个包含一个 md-list 指令，第二个包含 Bing 地图。md-list 使用了在 第一部分 和 第二部分 中讨论过的 ng-repeat 指令。文章开头的截图中显示了地图选项卡，而下面的截图显示了由机场选项卡显示的机场列表。

在上面的列表中，您可以单击“更多信息”按钮来显示一个包含更多信息的 信息框（请参阅 ListController.js 中的 doSecondaryAction 方法），如下面的截图所示。

当显示地图选项卡时，会用使用 Polygon 类 创建的矩形围绕感兴趣的区域。矩形内的每个机场都会显示其 IATA 代码的标记。单击机场标记将显示与上面“更多信息”信息框相同的信息。您可以单击地图上的任意位置以显示标记，然后使用 ListController.js 中的 DragEnd 方法拖动它，以确定它与您首次单击的位置之间的距离（以英里为单位）。

版本 2.0.0.0