"AngApiStarterConn": "Data Source=YourServerNameHere;
Initial Catalog=AngApiStarter;Integrated Security=True;"

生成API解决方案以确保已安装NuGet软件包，并且该解决方案成功生成。您必须先成功构建解决方案，然后才能为数据库运行Entity Framework更新。

dotnet ef database update -s ..\Api\Api.csproj

您现在应该拥有一个名为AngApiStarter的数据库，该数据库具有一个在SQL Server中命名为Customers的表。您可以将带有下面的SQL的示例插入customer表中：

insert into customers(firstName, lastName)
values('John', 'Smith');

通过运行API项目并检查以下URL，检查API是否可以从数据库获取数据：URL应该返回数据库中的customers列表：

https://localhost:44381/api/customer

导航至命令提示符下的ui文件夹，然后运行以下命令以获取运行Angular所需的库：

npm update

如果遇到找不到模块的错误，则可以运行以下命令以获取所需的模块：

npm install

通过运行以下命令来启动Angular，它将启动服务器并在浏览器中打开应用程序：

ng serve --open

应用程序的构建方式

public class Customer{[Required]public int CustomerId { get; set; }[Required, StringLength(80)]public string FirstName { get; set; }[Required, StringLength(80)]public string LastName { get; set; }}

然后为Customer类创建DbContext，使用Customer类作为DbSet，其最终将成为数据库中的表：

public class AngApiStarterDbContext : DbContext{public DbSet<Customer> Customer { get; set; }public AngApiStarterDbContext(DbContextOptions<AngApiStarterDbContext> options): base(options){}}

然后，在API项目中，我们定义数据库连接字符串，并将以下代码添加到Startup.cs的ConfigureServices方法中，如下所示。这样我们就可以使用API​​项目中定义的连接字符串在SQL Server中创建数据库和表：

//add the db context with the connection stringservices.AddDbContextPool<AngApiStarterDbContext>(options =>options.UseSqlServer(Configuration.GetConnectionString("AngApiStarterConn")));

生成解决方案，然后使用命令提示符，导航到Data项目文件夹，然后运行以下命令以创建数据库迁移的类：

dotnet ef migrations add initialCreate -s ..\Api\Api.csproj

创建类之后，运行以下命令以在SQL Server中创建数据库和表：

dotnet ef database update -s ..\Api\Api.csproj

在Data项目中，它具有接口以及使用实体框架的接口实现：

public interface ICustomerData{Task<IEnumerable<Customer>> Get();Task<Customer> GetCustomerById(int id);Task<Customer> Update(Customer customer);Task<Customer> Add(Customer customer);Task<int> Delete(int customerId);}

public class SqlCustomerData : ICustomerData{public AngApiStarterDbContext DbContext { get; }public SqlCustomerData(AngApiStarterDbContext dbContext){DbContext = dbContext;}...}

现在进入API项目。在API项目中，它在ConfigureServices方法中定义接口的实现类：

services.AddScoped<ICustomerData, SqlCustomerData>();

然后，控制器也通过依赖注入使用该接口：

public class CustomerController : ControllerBase{public ICustomerData CustomerData { get; }public CustomerController(ICustomerData customerData){CustomerData = customerData; }...

由于API和UI将在不同的网站上运行，因此需要允许UI网站使用CORS访问API。在API的appsettings.Development.json中，它具有UI的url：

"CorsUrl": "http://localhost:4200"

然后在Startup.cs文件中指定CORS策略：

private readonly string corsPolicy = "defaultPolicy";public void ConfigureServices(IServiceCollection services){services.AddCors(options =>{options.AddPolicy(corsPolicy,builder =>{builder.WithOrigins(Configuration["CorsUrl"]).AllowAnyMethod().AllowAnyHeader().AllowCredentials();});});...}public void Configure(IApplicationBuilder app, IWebHostEnvironment env){...app.UseCors(corsPolicy);...}

现在进入Angular的UI项目。使用Angular入门项目，在项目app/common/material.module.ts下定义了Angular Materials组件，在其中添加了所有组件，以便您可以使用这些组件而无需将其显式添加到app.module.ts。然后在app.module.ts中，它仅包含Material模块：

import { MaterialModule } from './common/material.module';

API URL的位置在environment/environments.ts文件中定义：

export const environment = {production: false,apiCustomer: 'https://localhost:44381/api/customer'
};

该模型在model/ICustomer.ts文件中定义，具有与API相同的模型签名：

export interface ICustomer{customerId: number,firstName: string,lastName: string
}

与API交互的支持位于service/customer.service.ts文件中。它使用BehaviorSubject将客户列表作为Observable（可以将其视为数据流）。当Observable改变时，所有的观察员（你可以把它当作听众或用户）得到通知的变化，可以相应地做出反应。在CustomerService类中，需要在Observable需要通知所有观察者时调用customerList.next方法：

private customerList = new BehaviorSubject<ICustomer[] | null>(null);customerList$ = this.customerList.asObservable();...//get the list of customersget(){this.http.get<ICustomer[]>(this.url).pipe().subscribe(result => {if (result)//notify the Observers of the changethis.customerList.next(result)});}

Customer组件显示了您可以管理的客户列表，它通过在ngOnInit方法中订阅CustomerService类来监听类中的更改：

export class CustomerComponent implements OnInit {...ngOnInit(){this.custService.customerList$.subscribe(data =>this.customerList = data);}

当用户单击“添加”或“编辑客户”按钮时，它将打开一个对话框，您可以将数据传递给该对话框，并定义关闭该对话框时要执行的操作。下面显示了添加一个新的customer并在关闭对话框时调用CustomerService时传递给该对话框的数据：

openAddDialog(){let dialogRef = this.custDialog.open(CustomerDialog, {width: '300px',data: {action: 'add',customer: { customerId: 0, firstName: '', lastName: ''}} });dialogRef.afterClosed().subscribe(result => {//add the customerif (result)this.custService.add(result)    });}

为了进行编辑customer，它需要将customer数据的副本而不是实际的customer数据传递给对话框，因此，如果用户决定取消，则customer值不会更改：

customer: {...customer} //shallow copy the customer using spread operator

对话框组件是在app/customer/dialog/customer-dialog.component.ts中定义的，该组件使来自Material的Dialog组件的MAT_DIALOG_DATA接受调用者的数据：

export class CustomerDialog {...constructor(public dialogRef: MatDialogRef<CustomerDialog>,@Inject(MAT_DIALOG_DATA) public data: any) {this.action = data.action;this.customer = data.customer;}

最后，使用npm添加bootstrap库，并将对bootstrap样式表的引用添加至index.html：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap...>

在CustomerComponent的html中，添加了bootstrap的flexbox类，以使元素居中对齐并组织布局：

<div class="d-flex flex-row justify-content-center"><div class="d-flex flex-column">

就这样。希望您觉得它对您的项目有帮助。