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