在本篇文章中，将探讨如何利用AngularJS和REST API技术来展示机场信息。首先，需要创建一个数据库表来存储机场数据，然后编写后端API以供前端调用，最后实现前端页面以展示这些数据。本文假设读者已经熟悉JavaScript、ASP.NET MVC、C#、Entity Framework、HTML、JSON和CSS，并且已经了解AngularJS的基础知识。
目标是使用Entity Framework的Database First模型来利用现有的机场数据表。首先，需要将CreateAirportTable.sql脚本中的[YOUR_DATABASE_NAME]替换为数据库名称，然后在SQL Server Management Studio (SSMS)中执行该脚本以创建Airport表。表创建完成后，通过执行AirportDataBaseLosAngeles.sql脚本可以填充表数据。这些数据是从https://openflights.org/data.html获取的，也可以从其他来源如FAA网站获取机场数据。
为了将现有表添加到项目中，需要向项目中添加ADO.NET Entity Data Model。如果已经完成了这一步，只需要修改Web.config中的AirportEntities连接字符串，将[YOUR_SERVER_NAME]和[YOUR_DATABASE_NAME]分别替换为服务器名称和数据库名称。以下是连接字符串的示例：
<connectionStrings>
<add name="AirportEntities" ... connectionString="source=[YOUR_SERVER_NAME]; initial catalog=[YOUR_DATABASE_NAME] ... " />
</connectionStrings>
下载AirportDatabaseProject.zip文件并解压。它包含一个名为AngularJS_REST_API_AirportLocator的目录，其中包含JavaScript和HTML文件、两个SQL脚本文件以及Visual Studio 2015项目AirportsAPI。使用Visual Studio打开AirportsAPI项目，按F6构建项目，应该能够成功构建且没有错误。按F5以调试模式运行AirportsAPI项目。
运行项目后，如果安装了curl工具，可以通过以下命令调用API：
curl -X GET http://localhost:55213/api/Airports
这将返回所有机场的JSON字符串。（URL中的"55213"是端口号，通过项目属性中的项目URL设置。）还有一个API可以通过ID获取单个机场的信息：
curl -X GET http://localhost:55213/api/Airport/23
注意URL中的Airport是单数形式，并且ID 23包含在URL的末尾，因此是从数据库中获取ID为23的机场信息，即Long Beach机场。应该得到如下JSON响应：
{
"ID": 23,
"VendorID": 3582,
"Name": "Long Beach /Daugherty Field/ Airport",
"City": "Long Beach",
"Country": "United States",
"IATA": "LGB",
"ICAO": "KLGB",
"Latitude": 33.81761,
"Longitude": -118.15200,
"Altitude": 60,
"Timezone": -8.00,
"DST": "A",
"TZ": "America/Los_Angeles",
"Type": "airport",
"Source": "OurAirports"
}
使用与AngularJS和REST API, Part 1中描述的相同技术，有两个主要的JavaScript文件用于调用REST API：app/airports/airportsController.js和app/airports/remoteAirportsService.js。右键点击AirportLocaterApproach1.html，选择"Open With Chrome"。（可能还想打开Chrome的"Developer Tools"窗口以便查看任何错误消息。）点击"All Airports"按钮将调用fetchAirports方法，该方法反过来调用上述的api/Airports API。
第一种方法使用AngularJS的ng-repeat指令和一个过滤器来选择所有名称包含过滤器字符串"long"的机场，如下所示：
<input type="button" ng-click="showMap(singleAirport.ID)" value="{{ singleAirport.Name }}" class="btn-success" data-toggle="tooltip" title="Single Airport" id="singleairport">
点击"Long Beach /Daugherty Field/ Airport"按钮将显示Long Beach机场的地图（注意Bing地图提供了放大和缩小的按钮）。
第二个目标是使用AngularJS的md-autocomplete指令，它显示一个下拉列表，列出所有与自定义查询匹配的机场。在下面的图片中，所有名称或城市名称包含"Lo"的机场都被显示出来。
要查看此功能，首先编辑scripts/AutoCompleteController.js，并将'YOUR CREDENTIALS'替换为Bing密钥。在Windows资源管理器中，右键点击AirportLocaterApproach2.html，选择"Open With Chrome"。（可能还想打开Chrome的"Developer Tools"窗口以便查看任何错误消息。）页面应该像上面的图片一样，主要由一个文本框组成，可以从中通过名称或城市搜索机场。选择机场后，名称、城市、IATA和ICAO代码、纬度、经度、海拔和时区将显示在HTML表格中。还将显示显示机场的地图，如本文开头的图片所示。
控制器AutoCompleteController中的一个关键方法叫做filterFn，如果通过调用REST API获得的机场列表中包含查询字符串的机场，则返回true。（在代码中，有注释描述如何只返回以查询字符串开头的机场，尽管认为在这种情况下不太有用。）