单页应用（SPA）是一种流行的 Web 应用程序架构，它使用 AJAX 技术在同一页中动态加载内容，提供了更加流畅的用户体验。在 ASP.NET 中，我们可以使用一些框架和工具来开发 SPA 应用程序。本文将介绍如何使用 ASP.NET 开发 SPA 应用程序，并提供一些示例代码和最佳实践。
SPA 架构
SPA 应用程序的核心是客户端 JavaScript 应用程序。此应用程序可以使用任何现代 JavaScript 框架和库，如 Angular、React 和 Vue.js。这些框架提供了许多功能和工具，例如组件、路由和状态管理，可以帮助我们更轻松地构建复杂的单页应用程序。
在 ASP.NET 中，我们可以使用 ASP.NET Web API 和 ASP.NET MVC 来提供 RESTful API 和服务端渲染的视图。这些 API 可以与客户端 JavaScript 应用程序进行通信，从而提供数据和其他功能。
使用 ASP.NET Web API 和 Angular 开发 SPA
在这个示例中，我们将使用 ASP.NET Web API 和 Angular 来构建一个简单的 SPA 应用程序。我们将使用 Visual Studio 2019 创建一个新的 ASP.NET Web API 项目，并使用 Angular CLI 创建一个新的 Angular 应用程序。
创建 ASP.NET Web API 项目
在 Visual Studio 2019 中，选择“新建项目”，然后选择“ASP.NET Web Application”模板。在下一步中，选择“Web API”模板。此模板将创建一个基本的 ASP.NET Web API 项目，其中包含一个控制器和一些示例代码。
创建 Angular 应用程序
在命令行中，使用 Angular CLI 创建一个新的 Angular 应用程序。在命令行中，运行以下命令：
ng new my-app
此命令将创建一个名为“my-app”的新 Angular 应用程序。运行以下命令以启动开发服务器：
cd my-app ng serve
现在，我们已经有了一个 ASP.NET Web API 项目和一个 Angular 应用程序。接下来，我们将配置它们以共同工作。
配置 ASP.NET Web API
在 ASP.NET Web API 项目中，我们将创建一个简单的控制器，该控制器将返回一些示例数据。在 Visual Studio 2019 中，右键单击“Controllers”文件夹，然后选择“添加”>“控制器”。在下一步中，选择“API 控制器 - 空”的模板。
在新的控制器类中，添加以下代码：
-- -------------------- ---- -------
----- ---------------------------
----- ----------------
--------- --------------------
-
------ ----- -------------------- - -------------
-
---------
------ ------------------- -----------
-
------ --- -------- - --------- --------- -------- --
-
-
-此控制器将返回一个字符串数组，其中包含三个示例值。现在，我们已经可以使用此控制器从客户端 JavaScript 应用程序中获取数据。
配置 Angular 应用程序
在 Angular 应用程序中，我们将创建一个简单的服务，该服务将使用 HTTP 客户端从 ASP.NET Web API 中获取数据。在命令行中，运行以下命令以创建一个新的服务：
ng generate service sample-data
此命令将创建一个名为“sample-data”的新服务。在新的服务类中，添加以下代码：
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
------ - ---------- - ---- -----------------------
------ - ---------- - ---- -------
-------------
----------- ------
--
------ ----- ----------------- -
------- ------ - ------------------
------------------- ----- ----------- - -
------------ -------------------- -
------ -------------------------------------
-
-此服务将使用 HTTP 客户端从 ASP.NET Web API 中获取数据。在构造函数中，我们注入了 HttpClient，这是 Angular 中用于发出 HTTP 请求的服务。在 getValues() 方法中，我们使用 HttpClient 发出 GET 请求，并返回一个 Observable，该 Observable 将字符串数组作为响应值。
现在，我们已经可以使用此服务从客户端 JavaScript 应用程序中获取数据。我们将在 AppComponent 中使用此服务，并在页面中显示数据。
在 AppComponent 类中，添加以下代码：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ----------------- - ---- ------------------------
------------
--------- -----------
--------- -
---------- ---------
----
--- ----------- ----- -- ---------- ----- -------
-----
-
--
------ ----- ------------ -
------- ---------
------------------- ------------------ ------------------ - -
---------- -
--------------------------------------------------- -- -
----------- - -------
---
-
-此组件将使用 SampleDataService 从 ASP.NET Web API 中获取数据，并在页面中显示数据。在 ngOnInit() 方法中，我们使用 SampleDataService.getValues() 方法获取数据，并在响应中设置组件的 values 属性。在模板中，我们使用 *ngFor 指令在列表中显示值。
运行应用程序
现在，我们已经完成了应用程序的开发。我们可以使用 Visual Studio 2019 启动 ASP.NET Web API 项目，并使用命令行中的 ng serve 命令启动 Angular 应用程序。在浏览器中，导航到 http://localhost:4200，我们应该能够看到一个包含三个示例值的列表。
最佳实践
在 ASP.NET 中开发 SPA 应用程序时，有一些最佳实践可以帮助我们更好地组织代码和提高性能。
使用 TypeScript
TypeScript 是一种静态类型语言，它可以帮助我们更轻松地编写可维护的代码。在 ASP.NET 中，我们可以使用 TypeScript 来编写客户端 JavaScript 应用程序。TypeScript 提供了许多功能，例如类型检查、类和接口，可以帮助我们更好地组织代码和提高性能。
使用 Webpack
Webpack 是一个模块打包工具，可以帮助我们将客户端 JavaScript 应用程序打包为一个或多个文件。在 ASP.NET 中，我们可以使用 Webpack 来打包客户端 JavaScript 应用程序，并将其包含在 ASP.NET MVC 视图中。使用 Webpack 可以提高性能，减少加载时间，并帮助我们更好地组织代码。
使用服务器端渲染
服务器端渲染（SSR）是一种技术，它可以在服务器上渲染视图，并将其发送到客户端。在 ASP.NET 中，我们可以使用 Razor 视图引擎来实现 SSR。使用 SSR 可以提高性能，缩短加载时间，并提供更好的搜索引擎优化。
结论
在 ASP.NET 中，我们可以使用许多工具和框架来开发 SPA 应用程序。使用 ASP.NET Web API 和 Angular 可以帮助我们更轻松地构建复杂的单页应用程序，并提供更好的用户体验。在开发 SPA 应用程序时，我们应该遵循最佳实践，例如使用 TypeScript、Webpack 和服务器端渲染，以提高性能和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/675838155b8c5cbb5f7de3b3