前言：

本系列文章主要為對(duì)所學(xué) Angular 框架的一次微小的實(shí)踐，對(duì) b站頁面作簡單的模仿。

本系列文章主要參考資料：

微軟文檔：　　　　https://docs.microsoft.com/zh-cn/aspnet/core/getting-started/?view=aspnetcore-2.1&tabs=windows

Angular 文檔：　　?https://angular.cn/tutorial

Typescript 文檔：　https://www.typescriptlang.org/docs/home.html

此系列皆使用 VSCode+C#+Typescript+Angular+EF Core 作為開發(fā)環(huán)境。如果有什么問題或者意見歡迎在留言區(qū)進(jìn)行留言。?

如果圖片看不清的話請(qǐng)?jiān)谛麓翱诖蜷_圖片或保存本地查看。

項(xiàng)目 github 地址：https://github.com/NanaseRuri/FakeBilibili

?本章內(nèi)容：頁面分析、創(chuàng)建 WebAPI + Angular7 項(xiàng)目

?一、頁面分析

首先分析我大概要做些什么效果：

??二、創(chuàng)建 WebApi + Angular 7 項(xiàng)目

?首先運(yùn)行命令創(chuàng)建一個(gè)新項(xiàng)目：

dotnet new angular -o FakeBilibili

由于 ASP.NET Core 的默認(rèn) Angular 項(xiàng)目使用的是 Angular6 框架，在此將命令行工作目錄轉(zhuǎn)移到當(dāng)前目錄，將當(dāng)前 Angular 項(xiàng)目刪除并使用 Angular CLI 創(chuàng)建新的 Angular 項(xiàng)目：

可選擇使用?--skipGit 跳過 Git 安裝。

ng new ClientApp --skipGit

Angular 7中，當(dāng)運(yùn)行 ng new 命令時(shí)，若沒有指定樣式表類型或是否使用默認(rèn)路由，會(huì)額外在命令行出現(xiàn)選擇項(xiàng)。在此為更方便地編寫樣式表選擇使用 scss。

?

在 Angular.json? 文件中更改 styles 屬性使用 scss，這里影響的只是 Angular CLI 創(chuàng)建組件時(shí)的選項(xiàng)：

由于在一個(gè) Angular+WebAPI 項(xiàng)目中同時(shí)存在后臺(tái)服務(wù)器以及 Angular 服務(wù)器，修改 Configure方法使其外部使用 Angular CLI 實(shí)例，而不是啟動(dòng)它自己的實(shí)例。

spa.UseProxyToSpaDevelopmentServer("http://localhost:4200");?

此處指定端口號(hào)為 4200 是因?yàn)?Angular 應(yīng)用默認(rèn)端口號(hào)為 4200，可以在 package.json 文件中對(duì)端口號(hào)進(jìn)行修改：

?

三、啟動(dòng)服務(wù)器

在 ClientApp 工作目錄中運(yùn)行 npm start 命令（PS：使用 npm start 是約定，本質(zhì)上運(yùn)行的是 ng serve），然后在 ASP.NET Core 項(xiàng)目文件夾中運(yùn)行 dotnet run 命令：

當(dāng)?shù)谝淮芜\(yùn)行 dotnet run 命令時(shí)會(huì)提醒創(chuàng)建 .vscode 文件夾，其中的 launch.json 可以配置啟動(dòng)環(huán)境，默認(rèn)為 development 環(huán)境。

當(dāng)使用?spa.UseProxyToSpaDevelopmentServer 方法后，如果在 Angular 項(xiàng)目未編譯完成啟動(dòng) https://localhost:5001/5000 會(huì)發(fā)生錯(cuò)誤。

ClientApp 工作目錄中：

ASP.NET Core 項(xiàng)目工作目錄中：

第一次運(yùn)行 npm start 命令可能會(huì)等待很長時(shí)間，Angular 項(xiàng)目編譯完成后如下：

?

?等待 Angular 項(xiàng)目編譯完成后打開 localhost:5000或5001，出現(xiàn)的是默認(rèn)的 Angular 項(xiàng)目的模板：

如果沒有覆蓋原 Angular 項(xiàng)目的話，出現(xiàn)的是微軟項(xiàng)目的模板：

原文地址：https://www.cnblogs.com/gokoururi/p/10666735.html

.NET社區(qū)新聞，深度好文，歡迎訪問公眾號(hào)文章匯總?http://www.csharpkit.com?

總結(jié)

以上是生活随笔為你收集整理的仿B站（一） 目的分析以及创建 WebAPI + Angular7 项目的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。