在本文中,我們將學習如何使用Angular 6和.NET Core創建SPA和標準Web應用程序。讓我們開始吧!
最近推出的Angular 6已經推出了一些非常棒的功能。
我們來看看如何使用Visual Studio 2017創建和 使用.NET Core SPA模板以及使用Angular 6應用程序。
使用.NET Core創建Angular 6應用程序的方法不止一種 - 讓我們看看其中的一些。
確保你已經安裝了 Visual Studio 2017和 .NET Core的最新SDK,當然還有Node和 Angular CLI。
不使用SPA模板
在這種方法中,我們不會使用任何模板,並會將Angular 6添加到API項目中。
在VS 2017中使用.NET Core 2.0模板創建Angular應用程序
一旦你安裝了所有這些,打開你的Visual Studio 2017 - >創建新項目 - >選擇核心Web應用程序:
點擊“確定”,然後在下一個窗口中選擇一個API,如下所示:
一旦創建了API項目,打開 命令提示符並導航到項目文件夾,運行以下命令:
ng new ClientApp
這將在API項目中創建一個 Angular 6應用程序。
下一個任務是使用.NET Core運行我們的Angular應用程序。為此,我們需要在Startup.cs類中添加一些代碼 。
在該ConfigureService 方法中添加以下行:
services.AddSpaStaticFiles(configuration => { configuration.RootPath = "ClientApp/dist"; });
在該Configure 方法中添加以下行 :
app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseSpaStaticFiles();
app.UseHttpsRedirection();
app.UseMvc();
app.UseSpa(spa => { spa.Options.SourcePath = "ClientApp";
if (env.IsDevelopment()) { spa.UseAngularCliServer(npmScript: "start"); } });
上面的代碼添加了 用.NET Core運行Angular代碼所需的配置。
注意:確保該屬性"launchUrl": "api/values"不存在於Properties / launchSettings.json中,如果它可用,則將其刪除。
只需在瀏覽器中運行應用程序:
您的Angular 6應用程序現在與.NET Core一起運行。
用SPA模板
在第一種方法中,我們沒有使用SPA模板來創建Angular應用程序; 在這種方法中,我們將使用Angular模板。
在VS 2017中使用.Net Core 2.1模板創建角度應用程序
一旦你安裝了所有這些,打開你的Visual Studio 2017 - >創建新項目 - >選擇核心Web應用程序:
點擊'OK',然後在下一個窗口中選擇Angular,如下所示:
Visual Studio將為您創建一個結構良好的應用程序。
如果您將此項目的結構與以前的版本進行比較,那麼您會注意到Views文件夾不再存在:
我們現在不需要該視圖文件夾。
刪除ClientApp並安裝Angular 6
如果您在ClientApp文件夾下打開 package.json文件 ,您會注意到Angular版本是5.0,但我們想要創建一個 Angular 6應用程序。
所以去文件資源管理器並刪除 ClientApp文件夾:
一旦該文件夾被刪除,打開 命令提示符並導航到該項目並運行以下命令:
ng new ClientApp
該命令將創建一個全新的Angular 6應用程序。
一旦該過程完成,返回到解決方案資源管理器 - > ClientApp - > package.json。這個文件應該顯示Angular 6.0引用:
這就對了。我們剛剛使用.NET Core創建了一個 Angular 6應用程序。
讓我們嘗試使用任何隨機的Angular 6功能,以確保我們擁有最新的Angular 6代碼。
測試庫功能
我們將測試與Angular 6一起發佈的庫功能。
再次打開命令提示符並導航到ClientApp文件夾 - >運行以下命令:
ng generate library my-shared-library
登錄窗口確認我們現在有Angular 6。該庫將在ClientApp - > Projects文件夾下創建:
希望這可以幫助!