Kendo UI for Angular最新版下載

Kendo UI for Angular是專業級的Angular UI組件庫，不僅是將其他供應商提供的現有組件封裝起來，telerik致力于提供純粹高性能的Angular UI組件，而無需任何jQuery依賴關系。無論您是使用TypeScript還是JavaScript開發Angular應用程序，Kendo UI for Angular都能為Angular項目提供專業的、企業級UI組件。

構建單頁應用程序（SPA）很有趣，尤其是當您開始使用Angular時，在這篇文章中，您將學習如何使用Angular輕松實現這一目標。

先決條件

為了能夠繼續執行本文的演示，您應該具備以下條件：

• VS Code之類的集成開發環境（IDE）
• 您的計算機上安裝Node version 11.0
• Node Package Manager 6.7版（通常隨Node安裝一起提供）
• v8.0及以上版本
• Angular的最新版本（版本12）：

ng version

確認您正在使用v12，如果沒有，請更新至v12版本。

如何在視圖之間導航？

構建SPA（單頁應用程序）的神奇之處之一就是能夠擁有多個視圖。 使用Angular使此操作非常容易，因為您可以通過導航工具在一個組件中動態顯示多個視圖。 您可以從主頁到“關于”頁面，再到“與我們聯系”頁面，全部集中在一個組件中。

為什么路由很重要？

想象一個場景，您從SPA中的一個視圖轉到另一個視圖，但URL完全沒有改變。 就像您單擊“關于我們”按鈕一樣，頁面顯示在DOM中，但URL仍然顯示“ newapp.com”而不是“ newapp.com/about”。

這存在一些問題，第一是如何將特定的視圖添加為書簽，看到書簽保存URL而不是應用程序視圖？其他問題是由于URL基本上是靜態的，刷新頁面的概念將如何工作以及如何與其他人共享鏈接。

路由確保URL與顯示的視圖匹配，以便您可以輕松地分離視圖，保持狀態甚至具有直觀的Web體驗。

什么是Angular Router？

是由Angular團隊構建和維護的JavaScript路由器，它具有廣泛的路由包，可讓您準確定義要分配給視圖的URL字符串。 您可以有多個路由器出口，路徑匹配甚至路由防護。 這是Angular重要組成部分，可確保可以使用該框架輕松構建SPA。

我們要構建什么？

我們將構建一個小型音樂電視應用程序，當您單擊連接它們的按鈕時，它將顯示兩個視圖，如下所示：

配置

首先，打開VS Code，然后在終端中使用以下命令創建一個新的angular應用程序：

ng new newap --routing

添加路由標記會自動創建一個名為newapp的新Angular應用，并預先配置路由。

現在更改目錄，使用以下命令導航到應用程序根文件夾：

cd newapp

兩個組件

接下來要做的是生成新的組件，該組件將容納計劃在其間交替的兩個視圖。

ng generate component artists -it -is
ng generate component records -it -is

這兩個命令會在源代碼的應用程序文件夾中使用內聯樣式和模板創建一個名為Artists and Records的新文件夾，默認情況下類似于Vue.js。 接下來要做的是配置路由以適配我們的需求。

配置路由

要配置路由器，請將下面的代碼塊復制到您的app-routing.module.ts文件中：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ArtistsComponent } from './artists/artists.component';
import { RecordsComponent } from './records/records.component';
const routes: Routes = [
{path:'artists', component:ArtistsComponent},
{path:'records', component:RecordsComponent}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
export const ArrayOfComponents = [ArtistsComponent, RecordsComponent]

首先，導入了兩個組件； 然后配置路由。請注意，如何將所需的URL字符串定義為Artists和Records，并將它們與兩個組件進行匹配？為了不繼續在其他可能需要的地方導入組件，我們創建了一個組件數組。

要注冊此新開發項目，請打開您的應用模塊文件，然后在下面的代碼塊中進行復制：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule, ArrayOfComponents } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent,
ArrayOfComponents
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

在這里我們注冊了新的組件數組，如您所見，不再需要將兩個組件導入數組中，這是保持代碼正確維護的好方法。

路由器鏈接

接下來要做的是構建應用模板本身，路由器鏈接是Angular路由器的一部分，用于指示鏈接 - 當您要指向視圖時，它在模板內至關重要。 在應用程序組件HTML文件中，將內容替換為以下代碼塊：

<div class="car">
<div style="text-align:center;">
<h1>
This is your Music TV
</h1>
</div>
<nav style="text-align:center;">
<button routerLink='/artists'>Artists</button>
<button routerLink='/records'>Records</button>
</nav>
<router-outlet></router-outlet>
</div>

當單擊 “Artists” 按鈕時，將視圖更改為Artists組件，并且在單擊 “Records”按鈕時，也進行了同樣的操作。

收尾

要向應用添加某種樣式以使其突出，請打開應用組件CSS文件并在其中復制以下規則：

.car {
top: 50%;
text-align: center;
border-radius: 25px;
border: 2px solid #73AD21;
padding: 20px;
width: 600px;
height: 250px;
margin-left: 25%;
margin-bottom: 15px;
}

button {
top: 50%;
text-align: center;
border-radius: 15px;
border: 2px solid #73AD21;
width: fit-content;
margin: 20px;
padding: 20px;
}

保存所有這些文件，并使用以下命令在開發服務器上運行該應用程序：

ng serve

您將看到它的運行與上面顯示的完全相同。