仿B站（一） 目的分析以及建立 WebAPI + Angular7 專案

前言：

本系列文章主要為對所學 Angular 框架的一次微小的實踐，對 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 作為開發環境。如果有什麼問題或者意見歡迎在留言區進行留言。

如果圖片看不清的話請在新視窗開啟圖片或儲存本地檢視。

專案 github 地址：https://github.com/NanaseRuri/FakeBilibili

 本章內容：頁面分析、建立 WebAPI + Angular7 專案

 一、頁面分析

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

  二、建立 WebApi + Angular 7 專案

 首先執行命令建立一個新專案：

    dotnet new angular -o FakeBilibili

由於 ASP.NET Core 的預設 Angular 專案使用的是 Angular6 框架，在此將命令列工作目錄轉移到當前目錄，將當前 Angular 專案刪除並使用 Angular CLI 建立新的 Angular 專案：

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

    ng new ClientApp --skipGit

Angular 7中，當執行 ng new 命令時，若沒有指定樣式表型別或是否使用預設路由，會額外在命令列出現選擇項。在此為更方便地編寫樣式表選擇使用 scss。

在 Angular.json  檔案中更改 styles 屬性使用 scss，這裡影響的只是 Angular CLI 建立元件時的選項：

由於在一個 Angular+WebAPI 專案中同時存在後臺伺服器以及 Angular 伺服器，修改 Configure方法使其外部使用 Angular CLI 實體，而不是啟動它自己的實體。

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

此處指定埠號為 4200 是因為 Angular 應用預設埠號為 4200，可以在 package.json 檔案中對埠號進行修改：

 

三、啟動伺服器

在 ClientApp 工作目錄中執行 npm start 命令（PS：使用 npm start 是約定，本質上執行的是 ng serve），然後在 ASP.NET Core 專案檔案夾中執行 dotnet run 命令：

當第一次執行 dotnet run 命令時會提醒建立 .vscode 檔案夾，其中的 launch.json 可以配置啟動環境，預設為 development 環境。

當使用 spa.UseProxyToSpaDevelopmentServer 方法後，如果在 Angular 專案未編譯完成啟動 https://localhost:5001/5000 會發生錯誤。

ClientApp 工作目錄中：

ASP.NET Core 專案工作目錄中：

第一次執行 npm start 命令可能會等待很長時間，Angular 專案編譯完成後如下：

 

 等待 Angular 專案編譯完成後開啟 localhost:5000或5001，出現的是預設的 Angular 專案的模板：

如果沒有改寫原 Angular 專案的話，出現的是微軟專案的模板：