一、了解 Angular 和 ASP.NET Core MVC
这本书是关于使用 Angular 和 ASP.NET Core MVC 一起创建丰富的应用。单独来看,这些框架都很强大,功能丰富,但是将它们结合在一起使用,可以将 Angular 的动态灵活性与 ASP.NET Core MVC 的坚实基础结合起来。
这本书是给谁的?
这本书是为 ASP.NET Core MVC 开发人员写的,他们想把 Angular 添加到他们的项目中,但是不知道从哪里开始。Angular 是一个复杂的框架,学习起来非常困难,本书通过使用 ASP.NET Core MVC 来支持 Angular 应用,提供了一个坚实的基础。到本书结束时,你将理解 ASP.NET Core MVC 和 Angular 是如何一起工作的,并且你将对 Angular 开发如何工作有一个基本的了解。
这本书包括什么?
这本书解释了如何在 ASP.NET Core MVC 项目中使用 Angular。我将演示如何创建一个包含 Angular 和 ASP.NET Core MVC 的 Visual Studio 或 Visual Studio 代码项目,并向您展示如何让它们协同工作。我将向您展示如何使用实体框架核心来存储应用数据,以及如何使用 ASP.NET Core Identity 来验证和授权用户。每个 ASP.NET Core 包都增加了它的复杂性,我将向您展示如何管理这些来为 Angular 提供功能。
这本书还介绍了 Angular 开发,重点是那些大多数应用需要的特性。我解释了 Angular 应用是如何工作的,如何构建一个 Angular 应用,以及各个构建块如何协作来创建复杂的特性。
这些例子基于 SportsStore,如果你读过我的其他书,你会很熟悉。SportsStore 是一个虚构的在线商店,包含大多数项目需要的功能。本书中的 SportsStore 示例已经过改编,因此我可以强调 Angular 和 ASP.NET Core MVC 之间的问题,并解释如何解决它们。
这本书没有涵盖什么?
这本书不是深入探讨 Angular 或 ASP.NET Core MVC。我假设你已经熟悉 C# 和 ASP.NET Core MVC 开发,我只描述基本的 Angular 特征。
我还写过其他书籍,为每个框架提供了深入的探讨。如果你对 ASP.NET Core MVC 开发不熟悉,那么你应该先看一下Pro ASP.NET Core MVC 这本书。一旦你掌握了 Angular 发展的基本知识,那么 Pro Angular 提供了一个全面的 Angular 特征之旅。这两本书有不同的版本,所以你应该小心选择覆盖你使用的 Angular 和 ASP.NET Core MVC 版本的版本。
注意
这本书涵盖了 Windows 上的开发。虽然。NET Core 支持 Linux 和 macOS,大多数 ASP.NET Core MVC 开发都是在 Windows 上完成的,所以本章和本书其余部分的说明只针对那个平台。
你需要知道什么?
在阅读这本书之前,你应该有 ASP.NET Core MVC 开发的工作知识,并对 JavaScript,HTML 和 CSS 有很好的理解。
有很多例子吗?
有个载荷的例子。最好的学习方法是通过例子,我已经尽可能多的把它们放进了这本书里。为了最大限度地增加本书中的示例数量,我采用了一个简单的约定来避免一遍又一遍地列出相同的代码。为了帮助您浏览项目,每个列表的标题都包括文件的名称以及可以找到该文件的文件夹,如下所示:
namespace ServerApp.Models.BindingTargets {
public class CheckoutState {
public string name { get; set; }
public string address { get; set; }
public string cardNumber { get; set; }
public string cardExpiry { get; set; }
public string cardSecurityCode { get; set; }
}
}
Listing 1-1.The Contents of the CheckoutState.cs File in the ServerApp/Models/BindingTargets Folder
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using Newtonsoft.Json;
using ServerApp.Models;
using ServerApp.Models.BindingTargets;
namespace ServerApp.Controllers {
[Route("/api/session")]
[ApiController]
public class SessionValuesController : Controller {
[HttpGet("cart")]
public IActionResult GetCart() {
return Ok(HttpContext.Session.GetString("cart"));
}
[HttpPost("cart")]
public void StoreCart([FromBody] ProductSelection[] products) {
var jsonData = JsonConvert.SerializeObject(products);
HttpContext.Session.SetString("cart", jsonData);
}
[HttpGet("checkout")]
public IActionResult GetCheckout() {
return Ok(HttpContext.Session.GetString("checkout"));
}
[HttpPost("checkout")]
public void StoreCheckout([FromBody] CheckoutState data) {
HttpContext.Session.SetString("checkout",
JsonConvert.SerializeObject(data));
}
}
}
Listing 1-2.Adding Methods in the SessionValuesController.cs File in the ServerApp/Controllers Folder
这是第 9 章中的另一个清单,粗体语句表示如果你按照这个例子做,你应该做的改变。我使用两种不同的约定来避免在长文件中重复代码。对于长的类文件,我省略了方法和属性,就像这样:
using Microsoft.AspNetCore.Mvc;
using ServerApp.Models;
using ServerApp.Models.BindingTargets;
using System.Collections.Generic;
using Microsoft.AspNetCore.Authorization;
namespace ServerApp.Controllers {
[Route("api/suppliers")]
[Authorize(Roles = "Administrator")]
public class SupplierValuesController : Controller {
private DataContext context;
// ...methods omitted for brevity...
}
}
Listing 1-3.Restricting Access in the SupplierValuesController.cs File in the ServerApp/Controllers Folder
第 12 章中的清单向您展示了一个新的属性必须应用于SupplierValuesController
类,但是没有列出构造函数或其他方法,它们保持不变。
这是我在突出显示文件中某个区域的更改时遵循的惯例,例如在一个长文件的单个方法中需要新语句时,如下所示:
...
app.UseEndpoints(endpoints => {
endpoints.MapControllerRoute(
name: "default",
pattern: "{controller=Home}/{action=Index}/{id?}");
endpoints.MapControllerRoute(
name: "angular_fallback",
pattern: "{target:regex(store|cart|checkout)}/{*catchall}",
defaults: new { controller = "Home", action = "Index"});
endpoints.MapControllerRoute(
name: "blazor_integration",
pattern: "/blazor/{*path:nonfile}",
defaults: new { controller = "Home", action = "Blazor"});
// endpoints.MapFallbackToClientSideBlazor<BlazorApp
// .Startup>("/blazor/{*path:nonfile}", "index.html");
endpoints.MapRazorPages();
});
...
Listing 1-4.Changing the Routing Configuration in the Startup.cs File in the ServerApp Folder
这是第 10 章中的一个清单,它要求在传递给ServerApp
文件夹中的Startup.cs
文件中的UseEndpoints
方法的函数中有一个新的语句,而文件的其余部分保持不变。
从哪里可以获得示例代码?
你可以从 https://github.com/Apress/esntl-angular-for-asp.net-core-mvc-3
下载本书所有章节的范例项目。该下载是免费的,包括重新创建示例所需的所有支持资源,而不必键入它们。您不必下载代码,但这是试验示例的最简单方法,并且可以很容易地将代码复制并粘贴到您自己的项目中。
你在哪里可以得到这本书的修改?
你可以在本书的 GitHub 资源库的Errata
文件中找到本书的更正, https://github.com/Apress/esntl-angular-for-asp.net-core-mvc-3
。
联系作者
如果你在使用本章中的例子时有问题,或者你在书中发现了问题,那么你可以发电子邮件到adam@adam-freeman.com
给我,我会尽力帮助你。请在 https://github.com/Apress/esntl-angular-for-asp.net-core-mvc-3
查看这本书的勘误表,看看它是否包含您的问题的解决方案,然后再联系我。
摘要
在这一章中,我描述了本书的目的和内容,解释了如何下载用于本书每一章的项目,并描述了我在代码清单中使用的约定。在下一章中,我将向你展示如何建立你的开发环境,为在第三章中创建一个组合的 Angular 和 ASP.NET Core MVC 项目做准备
版权属于:月萌API www.moonapi.com,转载请注明出处