我希望你們都知道Angular 5已經發布了。在本文中，我們將看到如何使用Angular5TemplateCore開始使用Angular 5和ASP.NET Core。
使用Angular5TemplateCore開發一個適用於ASP.NET Core的Angular 5應用程序非常簡單和容易。我們來詳細看看
先決條件
確保您已經在計算機上安裝了所有先決條件。如果沒有，那么下載並安裝所有，一個一個。
-
首先，從這個鏈接下載並安裝Visual Studio 2017 。
-
下載並安裝.NET Core 2.0
-
下載並安裝Node.js v9.0或更高版本。我已經安裝了v9.1.0（下載鏈接）。
注意
在啟動項目之前，請確保您的計算機上安裝了Visual Studio 2.0和.NET Core 2.0或更高版本。如果沒有，請從上面的鏈接下載並安裝。
先決條件安裝部分
安裝Nod.js
在您的計算機上安裝Node.js 9.0或更高版本。
安裝Angular5TemplateCore
我們來看看如何將Angular5TemplateCore安裝到Visual Studio .NET Core模板中。
打開Visual Studio 2017並轉到文件 - >新建項目。從左側菜單中選擇Online，然后選擇Visual C＃。從列表中，搜索Angular5TemplateCore並單擊確定。
關閉你的Visual Studio，等到Angular5TemplateCore安裝完成。安裝完成后，就可以使用ASP.NET Core Template構建第一個Angular 5應用程序了。我們將在代碼部分詳細的看到這一點。
代碼部分
現在是時候創建我們的第一個Angular 5和ASP.NET Core應用程序了。
步驟1創建Angular5TemplateCore
安裝完上面列出的所有先決條件和Angular5TemplateCore后，單擊開始>>程序>> Visual Studio 2017 >> Visual Studio 2017，在桌面上。
點擊新建>>項目。選擇Visual C＃>>選擇Angular5Core2。輸入您的項目名稱，然后單擊確定。
一旦我們的項目被創建，我們可以在解決方案資源管理器中看到它，以及ASP.NET Core控制器和View文件夾中的ClientApp文件夾中的Angular5示例組件，HTML和應用程序。
在這里，這些文件和文件夾與我們的Angular 2的ASP.NET核心模板包非常相似
。Package.json文件
如果我們打開package.json文件，我們可以看到Angular 5和Angular CLI所需的所有依賴關系已被默認添加。
在Package.json中添加Webpack
為了運行我們的Angular 5應用程序，我們需要在我們的應用程序中安裝webpack。如果webpack默認沒有添加到我們的package.json文件中，那么我們需要手動添加它。Webpack是一個開源的JavaScript模塊捆綁器。它使用依賴關系的模塊並生成代表這些模塊的靜態資產。要了解更多關於Webpack的信息， 請點擊這里。
打開你的package.json文件並在腳本下添加下面的行。
-
“postinstall”：“webpack --config webpack.config.vendor.js”
建立並運行你的項目
現在，我們的Angular 5和ASP.NET Core應用程序已經准備就緒。我們可以運行並在瀏覽器中看到輸出。首先，構建應用程序。構建成功創建后，運行該應用程序。
當我們運行Angular 5 ASP.NET Core應用程序時，我們可以通過左側菜單和Counter和Fetch數據看到默認主頁。是的，在Angular5Core2Template中，當我們創建一個新項目時，默認情況下，3個組件和一個HTML文件被添加到Angular 5 demo - Home，Counter和Fetch數據中。
在組件文件中，我們可以根據需要更改Angular 5類來生成輸出，或者我們可以添加自己的文件夾來顯示輸出，包含組件和HTML文件。
更改家庭組件和HTML文件
現在，我們嘗試更改主頁組件類和HTML文件，以在主頁上顯示具有我們的名稱的輸出。
為此，首先，我們編輯home.components.ts文件。在這里，在Home組件類中，我創建了一個公共變量來顯示我的名字為“myname”。
-
從'@ angular / core' 導入{Component} ;
-
@零件（{
-
選擇器： “家” ，
-
templateUrl： './home.component.html'
-
}）
-
導出類 HomeComponent {
-
public myname = “Shanu” ;
-
}
在home.html文件中，我更改了HTML設計來綁定和顯示Angular 5組件變量。
-
< h1 >
-
歡迎來到 < strong > {{myname}} </ strong > Angular5和ASP.NET Core的世界
-
</ h1 >
刷新主頁，我們可以看到，我的名字將顯示在Angular 5 Component的HTML頁面上，並附有歡迎消息。
與此類似，我們也可以從API示例組件中找到默認的Counter和Fetch數據，並且默認添加了HTML文件。如果我們想要，我們可以改變我們的要求，或者我們可以創建我們自己的組件和HTML文件。
左菜單
在應用程序中，我們可以看到左側的菜單。該菜單已使用navmenu.component.ts和navmenu.components.html顯示。如果你想刪除或添加一個菜單，我們可以改變HTML和Angular 5 TypeScript文件。
如果您已經使用過Angular 2的ASP.NET Core Template pack，那么使用Angular 5將會更加簡單和容易，因為它遵循類似的步驟。Angular 5與Angular 4大致相同，功能相同，但具有一定的先進性。
更多精彩文章請關注我們的微信公眾號FocusDotCore：
