AngularJS 和 REST API

charles922

4.00/5 (4投票s)

2018 年 3 月 15 日

CPOL

7分钟阅读

23672

1040

AngularJS 和 REST API 教程。

引言

这是一个为期 AngularJS 和 REST API 快速入门感兴趣的教程。我们将构建在每个化学教科书中都能找到的熟悉的元素周期表，并允许用户通过单击其符号来选择化学元素以显示其属性。假定读者熟悉 JavaScript、ASP.NET MVC、C#、Entity Framework、HTML、JSON 和 CSS。

背景

我这个项目的目标是为那些感兴趣的人介绍 AngularJS 和 REST API。如果你已经阅读到这里，你可能已经知道 AngularJS 是一个基于 JavaScript 的开源前端 Web 应用程序框架。你也可能熟悉MVC 模式。这个介绍并不是全面的，因为网上有很多关于 AngularJS 和 REST API 的信息来源，其中一些我已经提供了链接。例如，Rahul Rajat Singh 有一个很好的 AngularJS 系列文章。

Using the Code

这个项目有三个主要组成部分，下面将详细介绍。

ElementsAPI 项目。这是一个 Visual Studio 2015 项目，其中 REST API 是 C# 控制器，MVC 中的“C”部分。它还包含数据模型，MVC 中的“M”部分，位于 SQL Server 数据库的一个表中。
PeriodicTableOfElements.html。这是显示化学元素周期表的页面。请注意，还有一个 CSS 样式表 elements_style.css。这是 MVC 中的 View，即“V”部分。
JavaScript 和 AngularJS 文件。这是 AngularJS 控制器，也是 MVC 中的“C”部分。

1. ElementsAPI 项目

用 Visual Studio 打开 ElementsAPI 项目。按 F6 构建它；项目应该能够成功构建，没有错误。为了创建数据库表，您必须在 Web.config 文件中修改 ElementDBEntities 连接字符串，将其替换为您计算机上的 SQL Server 数据源和初始目录的名称。这是关于 SQL 连接字符串的更多信息。您还必须修改 Configuration.cs 文件第 31 行的截断命令，以包含您的数据库名称。要创建表，请打开程序包管理器控制台（View -> Other Windows）并运行以下命令：

Enable-Migrations (如果您收到消息：“Migrations have already been enabled in project 'ElementsAPI'”，则可以忽略)
Update-Database

这将使用Entity Framework Code First Model 创建一个名为 Elements 的单一数据库表。它还将使用前 50 种化学元素填充表。（我将在以后提供其余元素。）如果您无法使用 Entity Framework 创建 Elements 表，我提供了一个名为 CreateElementsTable.sql 的文件，您可以使用该文件手动创建表。按 F5 在调试模式下运行 ElementsAPI 项目。您可能想在这个关键的 C# 代码部分，即 ElementController.cs 中的控制器中设置一个断点。这是从 Elements 表中获取单个元素的 REST API。（为简单起见，我已将数据库中的 ID 与元素的原子序数相同。）

[Route("api/Element/{id}")]
[HttpGet]
public Element Get(int? id)
{
	List<Element> elements = dbContext.Elements.ToList();

	var element = dbContext.Elements.Find(id.Value);
	if (element == null)
	{
		return null;
	}
	return element;
}

当 ElementsAPI 项目运行时，如果您安装了 curl 工具，您可以像这样执行 API：curl -X GET https://:64227/api/Element/1。请注意，我们在 URL 末尾包含了 id=1，因此正在从数据库中获取第一个元素。（API 中的“64227”只是端口 id，是通过项目属性中的 Project URL 设置的。）您应该收到如下 JSON 响应：

{"ID":1,"AtomicNumber":1,"AtomicWeight":1.008,"Name":"Hydrogen","Symbol":"H",
"MeltingPoint":-259.0,"BoilingPoint":253.0,"Density":0.09,
"EarthCrustPerCentage":0.14,"Discovered":"1776","Group":1,"ElectronConfiguration":"1s1",
"IonizationEnergy":13.6}

2. PeriodicTableOfElements.html

在 Windows 资源管理器中，右键单击 PeriodicTableOfElements.html，然后选择“用 Chrome 打开”。（您可能还想打开 Chrome 的“开发者工具”窗口，以便查看任何错误消息。）页面应该显示如上图所示，基本上由每个化学元素的按钮组成。单击其中一个按钮，例如碳，将显示该元素的各种属性（原子质量、熔点、密度等）。

3. JavaScript 和 AngularJS 文件

这是此项目的核心，我们可以在这里看到 AngularJS 的实际应用。（感谢Rahul Rajat Singh 关于模块和控制器的文章。）app/app.js 文件仅包含一个IIFE（立即调用函数表达式），这是一个在定义时立即运行的 JavaScript 函数。

(function(){
    myModule = angular.module('myAngularApplicationElements', []);
}())

请注意模块的名称 myAngularApplicationElements，该名称在 PeriodicTableOfElements.html 的 HTML 标签中指定，用于“连接”我们的 html 和 AngularJS。

<html ng-app="myAngularApplicationElements>

在 HTML 的该行中，ng-app 是一个 AngularJS 指令，用于自动引导我们的应用程序。app/elements/elementsController.js 文件是事情变得有趣的地方。这是我们的 AngularJS 控制器，一个指定要在视图中使用的数据的 JavaScript 对象。在我们的 HTML 中，我们使用 ng-controller 指令来指定控制器。

<body ng-controller="elementsController">

当我们单击按钮时，将调用 JavaScript 方法 fetchElement。在 HTML 中，我们使用 AngularJS ng-click 指令来调用 fetchElement 方法，并传入数据库 ID。

<input type="button" ng-click="fetchElement(1)">

$scope 是 AngularJS 指令，可以被认为是控制器和视图之间的“粘合剂”。这是 fetchElement 控制器，我们在此调用一个名为 remoteElementsService.fetchElement(id) 的方法（稍后讨论）来从数据库获取数据并将其分配给 $scope。

$scope.fetchElement = function (id) {
	remoteElementsService.fetchElement(id)
		.success(function (data, status, headers, config) {
			$scope.singleElement = data;
		})
		.error(function (data, status, headers, config) {
			$scope.singleElement = null;
		$scope.error = "Failed to retrieve item from server: id=" + id;
	});
};

上述 JavaScript 方法中的 remoteElementsService.fetchElement(id) 被封装在 app/elements/remoteElementsService.js 中的 AngularJS 服务中。将服务与控制器这样分离，允许服务在需要时被代码的其他部分重用。关键部分是 AngularJS 预定义的服务 $http。它完成了调用 ElementsAPI上面的 ASP.NET MVC 代码中 API 的“繁重工作”。在服务中，该方法称为 _fetchElement，带有前导下划线，这将在稍后解释。

var _fetchElement = function (id) {
	return $http.get('https://:64227/api/Element/' + id);
};

请注意，在服务中，该方法称为 _fetchElement（带有前导下划线），但当我们从控制器调用它时，我们调用 fetchElement（没有前导下划线）。这是使用称为揭示模块模式的 JavaScript 模式的结果。您可以在 app\elements\remoteElementsService.js 的末尾看到这一点。

	return {
		fetchElements:		_fetchElements,
		fetchElement:		_fetchElement
};

从控制器返回的数据被放入 $scope.singleElement 中，然后显示在 PeriodicTableOfElements.html 的双大括号（称为 AngularJS 模板）中，如下所示：{{ singleElement.ID }} 让我们看一个例子。如果您将鼠标悬停在元素周期表右上角的 **He** 按钮上，将显示元素的名称“Helium”。当我们单击按钮时，AngularJS 控制器会调用 AngularJS 服务，该服务反过来会调用上面的 ElementsAPIASP.NET MVC 代码。在下图中，我们可以看到结果。

AngularJS and REST API

除了通过 ID 检索单个 Element 的 API 外，还有一个 API 用于在 ElementController.cs 中获取数据库表中的**所有** Element。

[Route("api/Element")]
[HttpGet]
public IEnumerable<ElementsAPI.Models.Element> Get()
{
	var elements = dbContext.Elements.ToList().OrderBy(s => s.AtomicNumber);
	return elements;
}

在 elementsController.js 中有一个相应的 fetchElements（注意是复数）方法，它从服务中获取所有数据并将其放入 $scope.elements 中。

var elementsController = function ($scope, $filter, remoteElementsService) {
	    $scope.fetchElements = function () {
            remoteElementsService.fetchElements()
			.success(function (data, status, headers, config) {
			    $scope.elements = data;
			})
			.error(function (data, status, headers, config) {
			    $scope.elements = null;
			    $scope.error = "Failed to retrieve item from server: id=";
			});
	    };

同样，在 remoteElementsService.js 中有一个 _fetchElements（注意是复数且有前导下划线）方法，它调用上面的 ElementsAPIASP.NET MVC 代码中的 API。

var _fetchElements = function () {
	return $http.get('localhost:64227/api/Element');
};

再次，名称 _fetchElements 中的前导下划线是使用称为揭示模块模式的 JavaScript 模式的结果，您可以在 app\elements\remoteElementsService.js 的末尾看到这一点。

	return {
		fetchElements:		_fetchElements,
		fetchElement:		_fetchElement
};

在 html 文件中，请注意 ng-repeat 指令用于迭代集合的所有项。

<tr ng-repeat="singleElement in elements | 
orderBy: (isOrderDescending == true ? '-': '') + orderByField | filter:filterString">

| orderBy: 和 | filter:filterString 是 AngularJS 过滤器，顾名思义，它们只选择包含 filterString 的数据库记录，并根据 orderByField 按字母顺序排序。与从数据库返回单行的情况一样，我们使用双大括号显示字段，如下所示：{{ singleElement.ID }} 让我们看一个例子。在下图中，我们通过单击“Get Elements”按钮选择了数据库中的所有元素，然后过滤出包含字符串“ium”的元素（为清晰起见，已省略许多元素！）。

AngularJS and REST API

结论

我希望本文能让您对 AngularJS 的功能有所了解。尝试为这个项目添加一些功能，如果您想分享一些内容，请在下面的评论中分享。例如，标有“Alkali Metal”、“Alkaline Earth”等的 10 个按钮仅作为表中按钮的颜色键。换句话说，单击它们目前没有任何操作。一个很好的练习是使用 ng-click 指令为它们赋予一些操作，然后在 JavaScript 控制器中编写一些代码，也许是一个弹出窗口，其中包含“Alkali Metal”的描述。

版本 1.0.0.0