一、了解 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

这是第九章的列表,标题告诉你它指的是一个名为CheckoutState.cs的文件,可以在ServerApp/Models/BindingTargets文件夹中找到。一个结合了 Angular 和 ASP.NET Core MVC 的项目可以有很多文件,重要的是改变正确的文件。(暂时不要担心清单中的代码或文件夹结构。)当我对文件进行修改时,我会用粗体显示修改后的语句,如下所示:

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 项目做准备