在本教程中，将探讨如何使用AngularJS和REST API创建一个机场定位应用。这个应用将展示如何使用AngularJS的md-autocomplete、md-tab和md-list-item指令来展示一个下拉列表，其中包含与查询匹配的所有机场名称。在第三部分中，将展示如何在指定矩形区域内获取所有机场，并将它们显示在两个AngularJS标签页中，第一个标签页包含机场列表，第二个标签页包含地图（地图在文章开头的截图中显示，注意大写字母MAP和红色下划线，表示它是选中的标签页）。
下载并解压zip文件，它包含以下文件：AirportLocaterApproach3.html、ListController.js和AirportController.cs。在构建项目之前，需要执行以下三个任务。首先，用这个更新后的版本替换从AngularJS和REST API，第2部分下载的项目中的AirportController.cs。其次，将AirportLocaterApproach3.html复制到AngularJS_REST_API_AirportLocator目录，将ListController.js复制到AngularJS_REST_API_AirportLocator\scripts目录。用Visual Studio打开AirportsAPI项目。清理解决方案，然后按F6构建它；项目应该成功构建，没有错误。第三，和第2部分一样，需要在ListController.js中将'YOUR CREDENTIALS'更改为Bing凭据。如第2部分所述，记得将Web.config中的AirportEntities连接字符串更改为指向数据库，设置[YOUR_SERVER_NAME]和[YOUR_DATABASE_NAME]为服务器和数据库的名称。
在AirportController.cs中有两个新方法，它们的任务是从数据库中获取所有落在矩形内的机场。注意这两个方法有相同的名称AirportsByRect，但有不同的签名。将在下面描述它们之间的区别。注意它们都调用一个名为GetAirportsByRect的方法来实际从数据库中获取数据。
C#
[
Route
(
"
api/AirportsByRect/{northLatitude}/{westLongitude}/{southLatitude}/{eastLongitude}"
)]
[HttpGet]
public
IEnumerable AirportsByRect
(
decimal
northLatitude,
decimal
westLongitude,
decimal
southLatitude,
decimal
eastLongitude)
{
IEnumerable airports = GetAirportsByRect
(northLatitude, westLongitude, southLatitude, eastLongitude);
return
airports;
}
C#
[
Route
(
"
api/AirportsByRect/{values}"
)]
[HttpGet]
public
IEnumerable AirportsByRect([FromUri] GeoRectangle location)
{
IEnumerable airports = GetAirportsByRect(location.NorthLatitude,
location.WestLongitude, location.SouthLatitude, location.EastLongitude);
return
airports;
}
当AirportsAPI项目运行时，可以使用curl实用工具从DOS命令提示符执行上述API，有两种方式：
curl -X GET http://localhost:55213/api/AirportsByRect/34.4/-119.3/33.7/-117.9/
curl -X GET http://localhost:55213/api/AirportsByRect/values/?
NorthLatitude=34.4^&WestLongitude=-119.3^&SouthLatitude=33.7^&EastLongitude=-117.9
注意第一种方法使用路由模板描述URI模式匹配，第二种方法使用查询字符串。在查询字符串中，用插入符号转义了和号。这两种方法都以JSON字符串的形式返回矩形内的机场。
也可以使用Postman来构建请求和读取响应；下面的截图显示了使用Postman返回的JSON：
新的AirportLocaterApproach3.html包含一个表单，用于输入描述矩形的纬度和经度。（回想一下第2部分中数据库表中的机场位于美国西海岸）。点击"Get Airports"按钮会调用新的ListController.js文件中的frmGetLatLonRectangle方法，该方法反过来调用上述第一个API来获取指定矩形内的机场。注意html中的AngularJS ng-submit指令：
ng-submit="getLatLonRectangle(frmGetLatLonRectangle)"
在html文件中，从md-content指令开始，有AngularJSmd-tab指令创建两个标签页，第一个包含md-list指令，第二个包含Bing地图。md-list使用了第1部分和第2部分中讨论的ng-repeat指令。文章开头的截图显示了显示的地图标签页，下面的截图显示了由Airports标签页显示的机场列表。